twitter-bootstrap Bootstrap 中的 .row 类是如何定义的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35886527/
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
How is .row class defined in Bootstrap?
提问by user31782
When I searched .rowin bootstrap.css file I got the following definitions:
当我.row在 bootstrap.css 文件中搜索时，我得到了以下定义：
...
.row:before,
.row:after,
... {
display: table;
content: " ";
}
...
.row:after
... {
clear: both;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
With these definitions I expect the .rowclass to behave as following:
有了这些定义，我希望.row该类的行为如下：
Before and after any row there should be block level element encompassing one white space
. The white space before.rowshould not be clearedand the white space after.row.should be cleared. -- None of this happen actually.Any
divelement with class.rowshould spread 15px out of its containing element to both left and right. -- This is observable with usual containing divs but not with body element. E.g. if there are two divs woth class row inside thebodyelement:
在任何行之前和之后都应该有包含一个空格的块级元素
。前面的空白.row不应该被清除，后面的空白.row.应该被清除。——这一切实际上都没有发生。任何
div具有 class 的元素.row都应该从其包含的元素向左和向右扩展 15px。-- 这可以通过通常包含的 div 观察到，但不能通过 body 元素观察到。例如，如果body元素内有两个类行的 div ：
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
.row div:nth-of-type(even) {
background-color: darkgray
}
.row div:nth-of-type(odd) {
background-color: lightgray
}<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>As can be seen the text doesn't goes out to the left of the viewport by 15px. Moreover both the rows are rendering without any gap in between. What happened to the .row:after {display: table; content: " ";}?
可以看出，文本不会超出视口左侧 15 像素。此外，这两行都在渲染，中间没有任何间隙。怎么了.row:after {display: table; content: " ";}？
Please explain.
请解释。
P.S: I don't know how the @import urlat-rule work in SO editor.
PS：我不知道@import url在 SO 编辑器中的规则是如何工作的。
回答by Luke
If you wrap the entire thing in a div, and add overflow: hidden;, you get the following, which is the same as you have achieved above, without the container.
如果将整个内容包装在一个 div 中，然后添加overflow: hidden;，则会得到以下结果，与上面实现的结果相同，但没有容器。
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
.row div:nth-of-type(even) {
background-color: rgba(168, 172, 176, 0.6);
}
.row div:nth-of-type(odd) {
background-color: rgba(88, 86, 84, 0.6);
}
#wrapper {
margin: 50px;
background: orange;
overflow: hidden;
}<div id="wrapper">
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
</div>If however, you remove overflow: hidden;, you will see the following:
但是，如果您删除overflow: hidden;，您将看到以下内容：
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
.row div:nth-of-type(even) {
background-color: rgba(168, 172, 176, 0.6);
}
.row div:nth-of-type(odd) {
background-color: rgba(88, 86, 84, 0.6);
}
#wrapper {
margin: 50px;
background: orange;
}<div id="wrapper">
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
</div>You'll notice the rows sit outside of the beige container. This means the negative margin is being achieved, but it is being hidden by whatever default styles are applied to the body, and counteracted by the padding on the .rows, so it seems as if the margin is not working. You can observe this further using the development tools in your browser.
您会注意到这些行位于米色容器的外面。这意味着正在实现负边距，但它被应用于 的任何默认样式隐藏，body并被 上的填充抵消.rows，因此似乎边距不起作用。您可以使用浏览器中的开发工具进一步观察这一点。
回答by Boopathi
.row:before, .row:after{
display: table;
content: " ";
clear:both
}
回答by Vivekraj K R
.row {
margin-right: -15px;
margin-left: -15px;
}
In this above case as you said it'll spread margin 15px to the left and right even if the row is added to the body tag.
在上面的例子中，正如你所说的，即使该行被添加到 body 标签，它也会向左和向右扩展 15px 的边距。
.row:before,
.row:after,
{
display: table;
content: " ";
}
.row:after
{
clear: both;
}
In the second case its actually adding clearfix to the class row since class col's('col-lg-12') have float left property you've to add a clearfix for parent class.
在第二种情况下，它实际上向类行添加了清除修复，因为类 col's('col-lg-12') 具有浮动左属性，您必须为父类添加清除修复。
