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 类的行为如下：

• 在任何行之前和之后都应该有一个包含一个空格 的块级元素。 .row 之前的空白不应清除，.row. 之后的空白应清除。 -- 这一切实际上都没有发生。

• 任何具有.row 类的div 元素都应从其包含元素向左和向右扩展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: " ";} 怎么了？

请解释一下。

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

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 上的填充抵消，所以看起来边距不起作用。您可以使用浏览器中的开发工具进一步观察这一点。

Answer 2

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

在上述情况下，正如您所说，即使将行添加到 body 标签，它也会向左和向右扩展 15px 的边距。

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


.row:after  
{
 clear: both;
}

在第二种情况下，它实际上将 clearfix 添加到类行，因为 class col's('col-lg-12') 具有 float left 属性，您必须为父类添加 clearfix。

Answer 3

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