.row类在Bootstrap中如何定义？ [英] How is .row class defined in Bootstrap?

问题描述

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

When I searched .row in bootstrap.css file I got the following definitions:

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

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

使用这些定义，我期望 .row 类的行为如下：

With these definitions I expect the .row class to behave as following:

• 在任何行之前和之后，应该有块级元素包含一个白空格 。 .row 之前的空格不应该被清除和 .row之后的空格。应该清除。

• Before and after any row there should be block level element encompassing one white space . The white space before .row should not be cleared and the white space after .row. should be cleared. -- None of this happen actually.

任何 div 元素与类 .row 应该向左和向右扩展其包含元素的15像素。 - 这是可观察的通常包含div，但不与body元素。例如。如果 body 元素中有两个div woth class row：

Any div element with class .row should 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 the body element:

@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：;} ？

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: " ";}?

请说明。

不知道 @import url 如何在SO编辑器中工作。

P.S: I don't know how the @import url at-rule work in SO editor.

推荐答案

如果你把整个东西包装在一个div中，并添加 overflow：hidden; ，你会得到以下，没有容器。

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.

@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; ，您将看到以下内容：

If however, you remove overflow: hidden;, you will see the following:

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

注意这些行位于米色容器的外部。这意味着实现了负边距，但它被任何默认样式隐藏到正文，并通过 .rows ，所以似乎边际不工作。您可以使用浏览器中的开发工具进一步观察。

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.

这篇关于.row类在Bootstrap中如何定义？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！