Bootstrap中的流体容器3

时间:2013-11-05 13:20:11

标签: css twitter-bootstrap less twitter-bootstrap-3

如何在引导程序3中制作流体容器?

在bootstrap 2.3.2中.container-fluid类就在那里。但现在在bootstrap 3中它缺失并且只有.container类。请帮我。

5 个答案:

答案 0 :(得分:32)

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>

答案 1 :(得分:20)

2.x .container-fluid已被Bootstrap 3.x(http://getbootstrap.com/getting-started/#migration)中的.container取代,因此.container 是流畅的,但它不是全宽。

您可以使用row作为流体容器,但必须稍微调整它以避免水平滚动条。摘自文档(http://getbootstrap.com/css/#grid)..

  

“人们希望创造出充分的流动性   布局(意味着您的网站会拉伸视口的整个宽度)   必须使用padding:0将其网格内容包装在包含元素中   15px的;抵消保证金: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

答案 2 :(得分:13)

这是在v3.1.0中引入的:http://getbootstrap.com/css/#grid-example-fluid

提交#62736046为全宽容器和布局添加了“.container-fluid变体”。

答案 3 :(得分:4)

我只是设置了以下CSS规则,其中任何行容器流体的子行将不再具有抵消网格系统的负余量。

.container-fluid > .row {
    margin-left: 0;
}

我将进一步测试,看看这是否会产生其他固定宽度网格布局的任何问题。

答案 4 :(得分:1)

这里有很好的答案,所以我会尽量避免自我重复以下几点:

  1. .container-fluid在3.0中删除了,但现在又回到了3.4(这个信息已经回复了,但我想把它放回答)
  2. 要获取最新版本,请转到 here 或使用Nuget。
  3. 行必须放在.container(固定宽度)或.container-fluid(全宽)内,以便正确对齐和填充。
  4. 有关Container的最新信息,请转到 here for Bootstrap CSS