使用twitter bootstrap的全宽布局

Question

我正在尝试完成类似于这个的布局:http: //dribbble.com/shots/829195-Slate/attachments/86422

我的项目使用Twitter Bootstrap和响应式设计.可以使用Bootstrap实现全宽度布局吗？

问题在于,从我读过的内容中,流体布局将在bootstrap 3.0中被删除,而响应式设计具有固定的宽度.

Answer 1

你会在这里找到一个很棒的教程:bootstrap-3-grid-introduction和你的问题的答案是<div class="container-fluid"> ... </div>

Answer 2

因为接受的答案与BS3不在同一个星球上,所以我将分享我用来实现几乎全宽度的功能.

首先,这是作弊.它不是真正的流动宽度 - 但似乎是 - 取决于观看网站的屏幕大小.

BS3和流体宽度站点的问题在于他们采用了这种"移动优先"的方法,这要求他们将每个惊人的屏幕宽度定义为他们认为是桌面的(1200px)我正在使用1900px的笔记本电脑上工作宽屏幕 - 所以我最终在内容的两边都有350px的BS3认为是桌面大小的宽度.

他们定义了10个屏幕宽度(实际上只有5个,但无论如何).我不太愿意改变它们,因为它们是常见的宽度.所以,我选择为BS定义一些额外的宽度,以便在决定容器类的宽度时进行选择.

我使用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,依此类推 - 直到手机大小.

如果你有更大的支持,只需创建更多像这样的@media屏幕语句.如果您正在构建CSS,则需要确定使用的装订线宽度,并从目标屏幕宽度中减去它.

更新:BS 3.0.1及更高版本(目前为止) - 就像将@ container-large-desktop设置为100%一样简单

Answer 3

更新:

Bootstrap 3已经发布,因为这个问题最初是在1月份回答的,所以如果你是BS3用户,请参考BS3 文档.对于仍在BS2上的人,原始答案仍然适用.如果您有兴趣从2切换到3,请参阅迁移指南.

原始答案:

从bootstrap 2 docs:

通过将.row更改为.row-fluid使任何行"流动".列类保持完全相同,使得在固定网格和流体网格之间轻松切换.

码

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

这与将容器的宽度设置为流体值相结合,可以让您获得所需的布局.

Answer 4

截至最新的Bootstrap(3.1.x),实现流畅布局的方式使用.container-fluid类.

请参阅Bootstrap网格以供参考

Answer 5

只需创建另一个类并与bootstrap 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%;
}

希望这会有所帮助，谢谢！