CSS Bootstrap 容器元素必须包含行元素吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12994012/
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
Must Bootstrap container elements include row elements?
提问by StackOverflowNewbie
From my reading of the documentation, it seems that .containeris the "parent" wrapper for the .rowand the divs that contain the .spanX(where the x totals 12). However, it doesn't seem like there is a .rowin their navigation example.
从我对文档的阅读来看，它似乎.container是.row和包含.spanX（其中 x 总计 12）的 div的“父”包装器。但是，.row在他们的导航示例中似乎没有。
Also, on their documentation site, the .containeris wrapped by a couple of navbar related divs.
此外，在他们的文档站点上，.container由几个与导航栏相关的 div 包装。
Can anyone elaborate a bit on how the framework should work? I'm new to it.
任何人都可以详细说明该框架应该如何工作吗？我是新手。
回答by Jon Egeland
The .rowclass is not requiredinside a .container, but it is a good idea to include it anyways when you start incase you want multiple rows later on.
该.row班是不是需要里面.container，但它是一个好主意，反正它列入当你开始以后柜面你想多行。
All that .rowreally does is make sure that all of the divs inside of it appear on their own line, separated from the previous and the following .rows.
所有这一切.row确实是确保所有的这里面的div的出现在自己的线，从以前的和下面分开.rows。
For the .containerinside of the .navbardivs, that is a separate thing that is required to make the navbar line up with the rest of the page. If you look further down in the rendered HTML, you'll see that there is another .containerthat is not inside any .navbardivs, and that is the one with all of the main content.
对于div的.container内部.navbar，这是使导航栏与页面的其余部分对齐所需的一个单独的东西。如果您进一步向下查看呈现的 HTML，您会看到另一个.container不在任何.navbardiv 中的，它是包含所有主要内容的那个。
A Complete Example
一个完整的例子
<div class="container">
<div class="row">
<!-- These divs are inline and do NOT fill up the full 12 columns -->
<div class="span4">...</div>
<div class="span4">...</div>
</div>
<!-- This is a automatically a new line of divs -->
<div class="row">
<!-- This div will appear below the previous row, even though it
would fit next to the other divs -->
<div class="span4"></div>
</div>
<!-- These will appear in their own row, but may act
unexpectedly in certain situations -->
<div class="span4"></div>
<div class="span4"></div>
</div>
In Short
简而言之
.rowdefines a row of divs, like the name implies. Each one indicates a new line of divs, no matter if the above line is full or not.
.row定义一行 div，顾名思义。每一个都表示一行新的 div，无论上面一行是否已满。
回答by jonschlinkert
The answer is much simpler than those given. No, .containerdoes not have to contain any specific code, and it has no encumbrances on what contains it...
答案比给出的要简单得多。不，.container不必包含任何特定代码，并且它对包含它的内容没有任何阻碍......
What .containerdoes is serve as a "wrapper" to "contain" the size of any and all elements wrapped inside of it. And .containercan wrap pages or components. So, if you want a page similar to those Twitter Bootstrap's docs, with a "fixed" width and equal margin on both sides, then only a single .containeris necessary to wrap all of the content on the page.
什么.container是作为“包装器”来“包含”包裹在其中的任何和所有元素的大小。并且.container可以包装页面或组件。因此，如果您想要一个类似于 Twitter Bootstrap 文档的页面，具有“固定”宽度且两侧边距相等，那么只需要一个.container页面即可将页面上的所有内容包装起来。
There are other uses for .containeras well; have you noticed how the top navbar in Bootstrap's docs (.navbar-fixed-top) spans the full width of the screen, but the nav items inside the navbar are "contained" to the width of the content? This is because the .navbar-fixed-topis not inside a .containerbut the .navinside it is.
还有其他用途.container；您是否注意到 Bootstrap 文档 ( .navbar-fixed-top) 中的顶部导航栏如何跨越屏幕的整个宽度，但导航栏中的导航项目“包含”在内容的宽度中？这是因为.navbar-fixed-topa 不在 a里面，.container而是在 a.nav里面。
回答by Andres Ilich
The bootstrap grid is composed of 12 columns that can be adjusted in any combination within a row as long as they add up to 12. You can think of them as containment rows such as the likes of table rows, which are meant to separate different rows of content. Within the grid, the .rowcontainer has a separate task and is there (and required) to readjust the last grid columns gutter width, which varies depending on screen size (if the responsive sheet is included). If you look at the css behind the .rowclass you will notice that it has a property of margin-left:-30pxby default (once again it can be greater or less depending on screen size), a property which is meant to "remove" the gutter from the last column in the row; without it the grid would not readjust the gutter and it would break onto a second line.
bootstrap 网格由 12 列组成，可以在一行内以任意组合进行调整，只要它们加起来为 12。您可以将它们视为包含行，例如表行之类的，旨在分隔不同的行的内容。在网格内，.row容器有一个单独的任务，并且在那里（并且需要）重新调整最后一个网格列的装订线宽度，这取决于屏幕尺寸（如果包含响应表）。如果您查看.row类背后的 css，您会注意到它margin-left:-30px默认具有一个属性（再次根据屏幕大小，它可以更大或更小），该属性旨在从最后一列“删除”装订线在行中；没有它，网格将不会重新调整排水沟，它会中断到第二行。
Now, the reason why the .rowcontainer is a child of the .containercontainer is because the .rowcontainer is only meant to separate "lines" of content, not to contain sections and more over center content in a page. As such, the reason why the navigation example did not have one was probably due to the fact that the nav elements is lacking in gutter width, since it was meant to be a full block element and not a grid, so there was no need to reset that last loose gutter.
现在，.row容器是容器的子级的原因.container是因为.row容器仅用于分隔内容的“行”，而不是包含页面中的部分和更多内容。因此，导航示例没有的原因可能是由于 nav 元素缺少 gutter 宽度，因为它是一个完整的块元素而不是一个网格，所以没有必要重置最后一个松散的排水沟。
