Как определяется класс .row в Bootstrap?

Question

Когда я искал .row в bootstrap.css файле я получил следующие определения:

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

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

С этими определениями я ожидаю, что .row класс вести себя следующим образом:

• До и после любой строки там должен быть элементом уровня блока, охватывающим одно пустое пространство . Пробел до .row не должен быть очищен и пробел после .row. должен быть очищен. - Ничего из этого не происходит.

• Любой элемент div с классом .row должен распространять 15px из его содержащего элемента влево и вправо. - Это наблюдается с обычным содержимым divs, но не с элементом тела. Например. если есть два класса дивы cо спаренной строки внутри body элемента:

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

Просьба пояснить.

P.S: Я не знаю, как работает @import url в редакторе SO.

Answer 1

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

В этом вышеприведенном случае, как вы сказали, он будет распространять границу 15px влево и вправо, даже если строка добавлена ​​к тегу тела.

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


.row:after 
{ 
clear: both; 
} 

Во втором случае его фактически добавляя clearfix к классу ряду, так как классовый Col в («Col-LG-12») имеет поплавок оставил свойство вы, чтобы добавить clearfix для родительского класса.

Answer 2

Если вы завернете всю вещь в 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, поэтому кажется, что маржа не работает. Вы можете наблюдать за этим, используя инструменты разработки в своем браузере.