如何在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.之后的.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> 

可以看出，文本没有以15px的形式出现在视口的左侧。 此外，两行都呈现在它们之间没有任何间隙。 发生了什么事情.row:after {display: table; content: " ";} .row:after {display: table; content: " ";} ？

请解释。

PS：我不知道@import url at-rule在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上的填充.rows ，所以看起来好像边距不起作用。 您可以使用浏览器中的开发工具进一步观察。

Answer 2

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

在上面的情况中，你说它即使将行添加到body标签也会向左右扩展15px。

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


.row:after  
{
 clear: both;
}

在第二种情况下，它实际上将clearfix添加到类行，因为类col（'col-lg-12'）具有float left属性，你必须为父类添加一个clearfix。

Answer 3

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