Сделать строки в одном столбце

Question

Я знаю, что «рекомендовал» сниппет для строк/столбцов в бутстрапу:

<div class="row"> 
    <div class="col-md-6"></div> 
    <div class="col-md-6"></div> 
</div> 

Everyting прекрасно - обивка & маржу сохраняются в каждом наборе столбцов.

Но в моем коде есть много вещей, как:

<div class="row"> 
    <div class="col-md-12"></div> 
</div> 

ли это можно объединить его в качестве одного из DIV? Я думаю, что я мог бы написать что-н, как это:

<div class="row col-md-12"> 
</div> 

(JS Fiddle)

Unfortunatley это Безразлично поработаем (как вы можете видеть, третья строка короче). Что я могу сделать, чтобы избежать дополнительного div с col-md-12?

Answer 1

Причина вы видите разницу, потому что .row определяет отрицательное margin-left и margin-right из -15px и .col-*-* определяет width из 100%

CSS Bootstrap в

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

.col-[rest of class name]{ 
    width:100%; 
} 

Ширина 100% вызывает отрицательный margin игнорируется. Если вы переопределяете отрицательное поле, ваши div будут иметь одинаковую ширину.

Override начальной загрузки CSS

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

Хотя я бы рекомендовал придерживаться самонастройки это намеренное использование, это будет исправить вашу width проблему.

Fiddle

https://jsfiddle.net/DTcHh/15539/