Bootstrap中的流体容器3

Question

Bootstrap中的流体容器3

Har*_*nan 31 css less twitter-bootstrap twitter-bootstrap-3

如何在bootstrap 3中制作流体容器？

在bootstrap 2.3.2 .container-fluid中有类.但现在在bootstrap 3中它缺失了,只有.container类.请帮我.

Answer 1

Bra*_*tie 33

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>

Run Code Online (Sandbox Code Playgroud)

不好的答案.`.container-fluid`*是*你所谓的"偏移行负填充",更加语义.所以人们:使用`class ="container-fluid"`而不是`style ="padding:0 15px;"`. (13认同)
@BradChristie请根据评论更新您的答案.:-) (4认同)
@flyingsheep：请记住，我写了这个 v3.1 之前的版本，他们重新添加了“.container-fluid”。 (2认同)

Answer 2

Zim*_*Zim 20

2.x 在Bootstrap 3.x(http://getbootstrap.com/getting-started/#migration)中.container-fluid被替换,所以它是流动的,但它不是全宽..container.container

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

"想要创建完全流畅布局的人(意味着你的网站延伸了视口的整个宽度)必须将其网格内容用填充包裹在包含元素中: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

Answer 3

Mar*_*tin 13

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

提交#62736046添加了".container-fluid变体的全宽容器和布局".

归档时间：	11 年，11 月前
查看次数：	83376 次
最近记录：	10 年，2 月前