如何在引导程序3中制作流体容器?
在bootstrap 2.3.2中.container-fluid
类就在那里。但现在在bootstrap 3中它缺失并且只有.container
类。请帮我。
答案 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
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)
这里有很好的答案,所以我会尽量避免自我重复以下几点: