twitter-bootstrap 如果您的内容要跨越整个宽度，您是否需要使用 Bootstrap 的“容器”和“行”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43171334/
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
Do you need to use Bootstrap's "container" and "row" if your content is to span the whole width?
提问by nonopolarity
I think the standard of Bootstrap 3 and 4 is
我认为 Bootstrap 3 和 4 的标准是
<div class="container">
<div class="row">
<div class="col-md-4"> ... </div>
<div class="col-md-8"> ... </div> <!-- just add up to 12 -->
</div>
</div>
But what if you have a div, table, form, or any element, that you plan to just let it span the whole width? Then do you need the containeror rowor col-md-12at all, for the whole page to display well under the styling rules of Bootstrap 3 and 4?
但是，如果您有一个div、table、form或任何元素，您打算让它跨越整个宽度呢？那么你需要container或者row或col-md-12可言，整个页面下引导3和4的样式规则显示效果出色？
P.S. if possible, please point to or quote the official Bootstrap docs related to this.
PS 如果可能，请指出或引用与此相关的官方 Bootstrap 文档。
回答by Zim
Short answer: you doneed to use container, but you don'tneed to use row.
简短的回答：你就需要使用container，但你并不需要使用row。
You can put elements directly in the containeror container-fluid. You aren't requiredto use the grid (.rowand .col-*), and the container alonecan be used as a container of content. Only use the grid when you need the responsive 12-unit structure.
您可以将元素直接放在containeror 中container-fluid。您不需要使用网格（.row和.col-*），并且容器本身可以用作内容的容器。仅当您需要响应式 12 单元结构时才使用网格。
For example, this is valid Bootstrap...
例如，这是有效的 Bootstrap...
<div class="container">
<h2>Hello World</h2>
<p class="lead">Some other content...</p>
</div>
From the Bootstrap docs...
从Bootstrap 文档...
"Bootstrap requires a containing element to wrap site contents and house our grid system."
“Bootstrap 需要一个包含元素来包装站点内容并容纳我们的网格系统。”
So, the purpose of containeris two-fold: 1) to "house the grid system", and 2) to "wrap site contents". However, when you do use the grid (.rowand .col-*), a container is requiredto wrap the .row.
因此，目的container有两个：1）“容纳网格系统”，以及 2）“包装站点内容”。但是，当您确实使用网格（.row和.col-*）时，需要一个容器来包装.row.
Even the basic starter templateutilizes containerwithout the grid.
即使是基本的入门模板采用container无网格。
In summary...
总之...
- You can use
.containeror.container-fluidalone to contain elements and page content. - Ifyou use the grid (
.rowand.col-*),.rowmust be inside a.containeror.container-fluid, and.col-*must be inside a.row.
- 您可以使用
.container或.container-fluid单独来包含元素和页面内容。 - 如果您使用网格（
.row和.col-*），则.row必须在 a.container或内部.container-fluid，并且.col-*必须在 a 内部.row。
回答by neophyte
You should add .container-fluidto your wrapping div. You should wrap the table, div, or form within a div add the class .container-fluidto it.
您应该添加.container-fluid到您的包装 div。您应该将表格、div 或表单包装在 div 中，然后.container-fluid向其中添加类。
回答by Turnip
You should use the .container-fluidclass if you want your content to span the full width of the document. Without this class the negative margins of .rowwill cause horizontal scrolling.
.container-fluid如果您希望您的内容跨越文档的整个宽度，您应该使用该类。如果没有这个类，负边距.row将导致水平滚动。
You could possibly omit the container-fluidandrowbut this may cause unexpected results when using other Bootstrap components.
您可以省略container-fluidand ，row但这在使用其他 Bootstrap 组件时可能会导致意外结果。
.col-md-4 {
background: red;
}
.col-md-8 {
background: green;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-4"> ... </div>
<div class="col-md-8"> ... </div>
</div>
</div>回答by DawgOnKing
Use fluid-container to span entire width of parent.
使用流体容器来跨越父级的整个宽度。
