与twitter引导全宽布局
我试图完成一个类似于这个布局： http : //dribbble.com/shots/829195-Slate/attachments/86422
我的项目使用响应式devise的Twitter Bootstrap。 Bootstrap可以实现全宽度布局吗？
问题是，从我一直在阅读stream体布局将被删除bootstrap 3.0中，响应式devise具有固定的宽度。
因为接受的答案与BS3不在同一个星球上，所以我将分享我正在使用的几乎全宽度的function。
首先，这是作弊。 这不是真正的stream体宽度 – 但它似乎是 – 根据查看网站的屏幕大小。
与BS3和stream体宽度网站的问题是，他们采取了这种“移动的第一”的方法，这就要求他们定义每个奇怪的屏幕宽度，他们认为是桌面（1200像素）我正在使用一台笔记本电脑的1900像素宽屏幕 – 所以我最终在内容的任何一边，在BS3认为是一个桌面大小的宽度350px。
他们已经定义了10个屏幕宽度（真的只有5，但无论如何）。 改变这些，我感觉不太舒服，因为它们是普通的宽度。 所以，我决定在决定容器类的宽度时为BSselect一些额外的宽度。
我使用BS的方式是采用所有Bootstrap提供的LESS文件，省略variables.less文件来提供我自己的，并添加我自己的一个到最后来覆盖我想改变的东西。 在我较less的文件中，我添加以下内容来实现2个常见的屏幕宽度设置：
@media screen and (min-width: 1600px) { .container { max-width: (1600px - @grid-gutter-width); } } @media screen and (min-width: 1900px) { .container { max-width: (1900px - @grid-gutter-width); } } 这两个设置为您实现不同屏幕宽度所需执行的操作设置了示例。 在这里，你得到1600px和1900px的全宽。 任何小于1600 – BS回落到1200px宽度，然后到768px等等 – 下降到手机的大小。
如果你有更大的支持，只需创build更多像这样的@media屏幕语句。 如果你正在构buildCSS，你需要确定使用了什么样的宽度，并从目标屏幕宽度中减去它。
更新：BS 3.0.1以上（到目前为止） – 就像将@ container-large-desktop设置为100％一样简单
你会在这里find一个很好的教程： bootstrap-3-grid-introduction和你的问题的答案是<div class="container-fluid"> ... </div>
更新：
Bootstrap 3已经发布了，因为这个问题最初是在1月份回答的，所以如果你是BS3用户，请参考BS3 文档 。 对于那些仍然在BS2上，原来的答案仍然适用。 如果您有兴趣从2切换到3，请参阅迁移指南。
原始答案：
从bootstrap 2 文档 ：
通过改变行列的方式使任何行“stream体”。 列类保持完全相同，使固定网格和stream体网格之间轻松切换。
码
<div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div>
这样，将容器的宽度设置为stream体值，可以让您获得所需的布局。
至于最新的Bootstrap（3.1.x），实现stream体布局的方式是使用.container-fluid类。
请参阅Bootstrap网格以供参考
*{ margin:0 padding:0 }
确保你的容器宽度：％100
在Bootstrap 3中，使用百分比指定列。 （在Bootstrap 2中，只有当列/跨度在.row-fluid元素中时，情况.row-fluid ，但这不再必要，而且类不再存在。）如果使用.container ，那么@Michael是绝对正确的你会被卡住一个固定宽度的布局。 但是，如果您避免使用.container元素，则应该保持良好状态。
<body> <div class="row"> <div class="col-lg-4">...</div> <div class="col-lg-8">...</div> </div> </body>
身体的边缘已经是0，所以你应该能够站起来。 （列的两侧仍然有15px的填充，所以你可能不得不在你的devise中考虑这一点，但这不应该阻止你，而且你可以随时在下载Bootstrap的时候自定义这个）。
只需创build另一个类并与引导程序container类一起添加。 你也可以使用container-fluid 。
<div class="container full-width"> <div class="row"> .... </div> </div>
CSS部分非常简单
* { margin: 0; padding: 0; } .full-width { width: 100%; min-width: 100%; max-width: 100%; }
希望这有助于，谢谢！
这里是Bootstrap 3的100％宽度，100％高度布局的例子。
BS3最简单的方法就是像这样重新设置BS3 CSS设置的最大宽度和填充。 你再次得到一个容器stream体：
.container{ max-width:100%; padding:0; }
我认为你可以使用类“col-md-12”它需要左右填充和100％的宽度。 看起来这是一个很好的替代容器stream体从第二bootstrap。
