我正在尝试完成与此类似的布局：http: //dribbble.com/shots/829195-Slate/attachments/86422
我的项目使用带有响应式设计的 Twitter Bootstrap。可以用 Bootstrap 实现全宽布局吗？
问题是，从我一直在阅读的内容来看，流体布局将在 bootstrap 3.0 中被删除，并且响应式设计具有固定的宽度。
问问题
154252 次
10 回答
128
你会在这里找到一个很棒的教程：bootstrap-3-grid-introduction和你的问题的答案是<div class="container-fluid"> ... </div>
于 2013-08-27T21:26:53.037 回答
43
因为公认的答案与 BS3 不在同一个星球上，所以我将分享我用来实现几乎全角功能的东西。
首先，这是作弊。它不是真正的流体宽度 - 但它似乎是 - 取决于查看网站的屏幕大小。
BS3 和流体宽度网站的问题在于他们采用了这种“移动优先”的方法，这要求他们将每个可怕的屏幕宽度定义为他们认为的桌面（1200 像素）我正在使用 1900 像素的笔记本电脑宽屏 - 所以我最终在 BS3 认为是桌面大小的宽度的内容两侧都有 350 像素。
他们定义了 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);
}
}
这两个设置为实现不同屏幕宽度所需的操作设置了示例。在这里，您将获得 1600 像素和 1900 像素的全宽。任何小于 1600 - BS 回落到 1200px 宽度，然后到 768px 等等 - 下降到手机大小。
如果您有更大的支持，只需创建更多像这样的@media screen 语句。如果您正在构建 CSS，则需要确定使用的装订线宽度并将其从目标屏幕宽度中减去。
更新：
Bootstrap 3.0.1及更高版本（到目前为止） - 就像设置一样@container-large-desktop简单100%
于 2013-05-03T22:56:03.780 回答
11
更新：
Bootstrap 3 已经发布，因为这个问题最初是在一月份回答的，所以如果你是 BS3 用户，请参考 BS3文档。对于那些仍在使用 BS2 的人，原始答案仍然适用。如果您有兴趣从 2 切换到 3，请参阅迁移指南。
原答案：
从引导程序 2文档：
通过将 .row 更改为 .row-fluid 使任何行“流动”。列类保持完全相同，便于在固定网格和流动网格之间切换。
代码
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
这与将容器的宽度设置为可变值相结合，应该可以让您获得所需的布局。
于 2013-01-10T18:19:43.433 回答
7
.container-fluid从最新的 Bootstrap (3.1.x) 开始，它使用类来实现流畅的布局。
请参阅引导网格以供参考
于 2014-03-11T12:24:31.920 回答
5
只需创建另一个类并与引导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%;
}
希望这会有所帮助，谢谢！
于 2015-04-16T06:39:27.620 回答
4
*{
margin:0
padding:0
}
make sure your container's width:%100
于 2013-01-10T17:16:20.690 回答
4
在 Bootstrap 3 中，列是使用百分比指定的。（在 Bootstrap 2 中，仅当列/跨度位于.row-fluid元素内时才会出现这种情况，但这不再是必需的，并且该类不再存在。）如果您使用 a .container，那么@Michael 绝对正确，您将被卡住具有固定宽度的布局。但是，如果您只是避免使用 .container 元素，则应该保持良好状态。
<body>
<div class="row">
<div class="col-lg-4">...</div>
<div class="col-lg-8">...</div>
</div>
</body>
身体的边距已经是 0，所以你应该能够直接爬到边缘。（列的两边仍然有 15px 的填充，因此您可能必须在设计中考虑到这一点，但这不应该阻止您，您可以在下载 Bootstrap 时随时自定义它。）
于 2013-08-26T04:22:59.833 回答
3
这是使用 Bootstrap 3 的 100% 宽度、100% 高度布局的示例。
于 2013-09-12T11:42:41.513 回答
2
BS3 最简单的方法是像这样重置 BS3 CSS 设置的最大宽度和填充。你又得到一个 container-fluid ：
.container{
max-width:100%;
padding:0;
}
于 2013-09-12T11:06:32.723 回答
-2
我认为您可以只使用需要左右填充和 100% 宽度的类“col-md-12”。看起来这是第二个引导程序中容器流体的一个很好的替代品。
于 2013-11-11T13:05:24.073 回答