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.应被清除。——这一切实际上都没有发生。

• 任何div具有 class 的元素.row都应从其包含元素向左和向右扩展 15px。-- 这可以通过通常包含的 div 观察到，但不能通过 body 元素观察到。例如，如果元素内有两个属于 row 类的 div body：

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

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

@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
}

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

请解释。

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

Answer 1

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

在上面的情况下，正如您所说，即使该行添加到 body 标记，它也会向左和向右扩展 margin 15px。

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


.row:after  
{
 clear: both;
}

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