Bootstrap 中的 .row 类是如何定义的？

Question

当我在 bootstrap.css 文件中搜索 .row 时，我得到了以下定义：

 ...
.row:before,
.row:after,
... {
  display: table;
  content: " ";
}

...
.row:after
... {
  clear: both;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

通过这些定义，我希望 .row 类的行为如下：

• 任何行前后都应该有包含一个空白的块级元素 `. The white space before.row不应被 _清除_，.row.` 之后的空白应被 _清除_。 ——这一切实际上都没有发生。

• 任何 div 类 .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>

可以看出，文本不会超出视口左侧 15 像素。此外，两行之间都没有任何间隙地呈现。 .row:after {display: table; content: " ";} 发生了什么事？

请解释。

PS：我不知道 @import url 规则在 SO 编辑器中是如何工作的。

原文由 user31782 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果将整个内容包装在一个 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>

但是，如果您删除 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>

您会注意到这些行位于米色容器的外面。这意味着负边距正在实现，但它被应用于 body 的任何默认样式隐藏，并被 .rows 上的填充抵消，所以看起来好像保证金不起作用。您可以使用浏览器中的开发工具进一步观察这一点。

原文由 Luke 发布，翻译遵循 CC BY-SA 3.0 许可协议