Bootstrap 3 中的流体容器
Posted
技术标签:
【中文标题】Bootstrap 3 中的流体容器【英文标题】：Fluid Container in Bootstrap 3 【发布时间】：2013-11-16 09:12:53 【问题描述】：如何在 bootstrap 3 中制作流体容器？
在 bootstrap 2.3.2 .container-fluid 类中。但是现在在 bootstrap 3 中它丢失了，只有 .container 类。请帮我。
【问题讨论】：
不要使用.container 以 .row>.col-*-n 开头（.container-fluid 与 .row 相比是多余的）
Bootstrap 3 换句话说，使用 Bootstrap 2.3.2 的流动行为作为其列结构的 默认。
@BradChristie 不会遗漏 .container 使行的内容一直从左侧开始（在 md 或 lg 上查看时），而不是在左侧和右侧有一些填充？
【参考方案1】：
Bootstrap 3.0 转向“移动优先”方法。 .container 仅在您需要/想要四四方方布局的情况下才出现。但是，如果您完全免除 div.container-fluid，则默认情况下您将获得流畅的布局。
例如，要具有两列流畅布局，只需使用：
<body>
<header>...</header>
<div style="padding:0 15px;"><!-- offset row negative padding -->
<div class="row">
<div class="col-md-6">50%</div>
<div class="col-md-6">50%</div>
</div>
</div>
<footer>...</footer>
</body>
【讨论】：
只是一个提示，行负填充是为了匹配 col 填充 错误答案。.container-fluid 是你所说的“偏移行负填充”，只是语义上的。所以人们：使用class="container-fluid" 而不是style="padding:0 15px;"。
@flyingsheep：请记住，我在 v3.1 之前写了这篇文章，他们在其中重新添加了 .container-fluid。
好吧，你确实提到了它，不过 :)【参考方案2】：
在 Bootstrap 3.x (http://getbootstrap.com/getting-started/#migration) 中，2.x .container-fluid 被 .container 替换，所以 .container 是流动的，但它不是全宽的。
您可以将row 用作流体容器，但您必须稍微调整一下以避免出现水平滚动条。摘自文档 (http://getbootstrap.com/css/#grid)..
“人们希望创造完全流畅的 布局（意味着您的网站会延伸视口的整个宽度） 必须用 padding: 0 将它们的网格内容包装在包含元素中 15像素；偏移边距：0 -15px；用于 .rows。”
更多关于 3.x 的变化：http://bootply.com/bootstrap-3-migration-guide
演示：http://bootply.com/91948
Bootstrap 3.1 更新
container-fluid 在 Bootstrap 3.1 中再次返回。现在container-fluid 可用于创建全宽布局：http://www.bootply.com/116382
【讨论】：
“容器流体在 Bootstrap 3.1 中再次返回”——这令人困惑！容器流体与没有容器有何不同？ See the docs。 “行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充”【参考方案3】：这是在 v3.1.0 中引入的：http://getbootstrap.com/css/#grid-example-fluid
Commit #62736046 添加了“.container-fluid 全宽容器和布局的变体”。
【讨论】：
【参考方案4】：我只是设置了以下 CSS 规则，其中任何作为 container-fluid 子级的行将不再具有偏移网格系统的负边距。
.container-fluid > .row
margin-left: 0;
我会进一步测试，看看这是否会对其他固定宽度的网格布局造成任何问题。
【讨论】：
【参考方案5】：这里有很好的答案，所以我会尽量避免重复我在这个主题上的以下几点：
-
.container-fluid 在 3.0 中被删除，但现在又在 3.4 中恢复（此信息已回复但我想将其放在答案中）
要获取最新版本，请转到 here 或使用 Nuget。
行必须放置在 .container（固定宽度）或 .container-fluid（全宽）内，以便正确对齐和填充。
有关 Container 的最新信息，请转至 here for Bootstrap CSS
【讨论】：
以上是关于Bootstrap 3 中的流体容器的主要内容，如果未能解决你的问题，请参考以下文章