CSS Bootstrap 3 中的流体容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19789954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fluid Container in Bootstrap 3
提问by Hari Krishnan
How to make fluid container in bootstrap 3?
如何在引导程序 3 中制作流体容器？
In bootstrap 2.3.2 .container-fluidclass is there. But now in bootstrap 3 it is missing and there is only .containerclass. Please help me.
在引导程序 2.3.2.container-fluid类中有。但是现在在引导程序 3 中它不见了，只有.container类。请帮我。
回答by Brad Christie
Bootstrap 3.0moved to a "mobile first" approach. .containeris really only there in instances where you need/want a boxy layout. but, if you exempt the div.container-fluidentirely, you're left with a fluid layout by default.
Bootstrap 3.0转向“移动优先”方法。.container只有在您需要/想要四四方方的布局的情况下才真正存在。但是，如果您div.container-fluid完全免除 ，则默认情况下您会使用流体布局。
for example, to have a two-column fluid layout, simply use:
例如，要使用两列流体布局，只需使用：
<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>
回答by Zim
The 2.x .container-fluidwas replaced by .containerin Bootstrap 3.x (http://getbootstrap.com/getting-started/#migration), so the .containeris fluid, but it's not full width.
2.x在 Bootstrap 3.x ( http://getbootstrap.com/getting-started/#migration) 中.container-fluid被替换，所以它是流畅的，但它不是全宽。.container.container
You can use the rowas a fluid container, but you must tweak it a little to avoid a horizontal scroll bar. Excerpt from the docs (http://getbootstrap.com/css/#grid)..
您可以将row用作流体容器，但您必须稍微调整它以避免出现水平滚动条。摘自文档 ( http://getbootstrap.com/css/#grid)..
"Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows."
“希望创建完全流畅的布局（意味着您的网站会延伸视口的整个宽度）的人必须将他们的网格内容包装在一个包含元素中，填充：0 15px；偏移边距：0 -15px；用于 .rows。”
More on changes in 3.x: http://bootply.com/bootstrap-3-migration-guide
更多关于 3.x 的变化：http: //bootply.com/bootstrap-3-migration-guide
Demo: http://bootply.com/91948
UPDATE for Bootstrap 3.1
Bootstrap 3.1 更新
container-fluidhas returned again in Bootstrap 3.1. Now container-fluidcan be used to create a full width layout: http://www.bootply.com/116382
container-fluid在 Bootstrap 3.1 中再次返回。现在container-fluid可以用来创建全宽布局：http: //www.bootply.com/116382
回答by Martin
This was introduced in v3.1.0: http://getbootstrap.com/css/#grid-example-fluid
这是在 v3.1.0 中引入的：http://getbootstrap.com/css/#grid-example-fluid
Commit #62736046added ".container-fluid variation for full-width containers and layouts".
提交#62736046添加了“全宽容器和布局的 .container-fluid 变体”。
回答by Bryce Wilson
I simply setup the following CSS rule where any row that is a child of container-fluid will no longer have a negative margin that offsets the grid system.
我只是设置了以下 CSS 规则，其中作为 container-fluid 子项的任何行将不再具有偏移网格系统的负边距。
.container-fluid > .row {
margin-left: 0;
}
I will test further to see if this creates any issues with other fixed width grid layouts.
我将进一步测试，看看这是否会对其他固定宽度的网格布局产生任何问题。
回答by Deep
There are good answers here, so I will try to avoid my self repeating with my following points on the subject:
这里有很好的答案，所以我会尽量避免自己重复我在这个主题上的以下几点：
- .container-fluid was removed in 3.0 but now it's back in 3.4 (this info is in reply but I wanted to put it on answer)
- To get latest version go hereor use Nuget.
- Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
- For latest info on Container please go here for Bootstrap CSS
- .container-fluid 已在 3.0 中删除，但现在又回到 3.4（此信息正在回复中，但我想将其放在答案中）
- 要获取最新版本，请转到此处或使用 Nuget。
- 行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充。
- 有关 Container 的最新信息，请到此处获取 Bootstrap CSS
