Как вставить столбцы в Bootstrap?

Question

В Bootstrap documentation указано, что для размещения контента с помощью сетки я должен добавить новый .row и набор столбцов .col-sm-* в существующий столбец .col-sm-*. Тем не менее, вложенность только столбцов .col-sm-* без добавления нового .row, похоже, тоже работает.
Интересно, какая разница делает новый .row?

Answer 1

Rows Используются для создания горизонтальных групп столбцов. Строки также помогают удерживать элементы в одной строке. Это сделает все элементы в хорошо структурированном формате.

Попробуйте это и вы, и мы поймем сами.

ИСПОЛЬЗОВАНИЕ ROW

<div class="container-fluid"> 
    <h1>Hello World!</h1> 
    <p>Resize the browser window to see the effect.</p> 
    <div class="row"> 
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> 
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div> 
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-4" style="background-color:red;">.col-sm-4</div> 
    <div class="col-sm-4" style="background-color:yellow;">.col-sm-4</div> 
</div> 

БЕЗ ИСПОЛЬЗОВАНИЯ ROW

<div class="container-fluid"> 
    <h1>Hello World!</h1> 
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> 
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div> 
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> 
    <div class="col-sm-4" style="background-color:red;">.col-sm-4</div> 
    <div class="col-sm-4" style="background-color:yellow;">.col-sm-4</div> 
</div> 

Answer 2

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