twitter-bootstrap Bootstrap：行内有多个嵌套行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32433124/
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
Bootstrap: Multiple nested rows within row?
提问by MeltingDog
I know you can nest rows within nested columns, but is it 'against the rules' to nest rows directly within rows?
我知道您可以在嵌套列中嵌套行，但是直接在行中嵌套行是否“违反规则”？
eg:
例如：
<div class="row">
<div class="row">
cols in here
</div>
<div class="row">
cols in here
</div>
<div class="row">
cols in here
</div>
</div>
Or must these always be within columns?
或者这些必须总是在列内？
回答by Abhitalks
is it 'against the rules' to nest rows directly within rows?
直接在行中嵌套行是否“违反规则”？
Not against the rulesas such, but not a best practice as per the guidelines.
不违反此类规则，但不是指南中的最佳实践。
Per bootstrap guidelines, third point under introduction-
..and only columns may be immediate children of rows".
..并且只有列可以是行的直接子项”。
*Edit: This is still true with Bootstrap 4.0 Beta. The link to the docs above will automatically redirect to the version 3.3 documentation. Thank you @Aakashfor pointing this out.
*编辑：Bootstrap 4.0 Beta 仍然如此。上述文档的链接将自动重定向到 3.3 版文档。谢谢@Aakash指出这一点。
This is because of the padding which Bootstrap uses for its layout, it is a good practice to nest via row-column-rowpattern i.e. nest a row with one column across to nest.
这是因为 Bootstrap 用于其布局的填充，嵌套通孔row-column-row模式是一个很好的做法，即嵌套一行，一列跨越到嵌套。
See the difference in the snippet below. The first set of markup breaks the Bootstrap layout, although nothing bad happens.
请参阅以下代码段中的差异。第一组标记破坏了 Bootstrap 布局，尽管没有发生任何不好的事情。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="row">
<div class="col-xs-6">One</div>
<div class="col-xs-6">Two</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">One</div>
<div class="col-xs-6">Two</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-xs-12">One</div>
<div class="col-xs-12">Two</div>
<div class="col-xs-12">Three</div>
</div>
</div>