问题描述:

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;

}

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

  • 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.

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

网友答案:

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>
网友答案:
.row {
  margin-right: -15px;
  margin-left: -15px;
 }

In this above case as you said it'll spread margin 15px to the left and right even if the row is added to the body tag.

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


.row:after  
{
 clear: both;
}

In the second case its actually adding clearfix to the class row since class col's('col-lg-12') have float left property you've to add a clearfix for parent class.

相关阅读:
Top