Какова цель .row в Bootstrap?

Question

Согласно Bootstrap's documentation

Строки должны быть размещены в пределах .container (фиксированной ширины) или .container-fluid (полная ширина)

и

Использование строк, чтобы создать горизонтальные группы столбцов.

Зачем это необходимо?

.row может занимать только максимальную ширину либо .container или .container-fluid

Учитывая, что вы должны закрыть .row, кажется, больше писать:

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <h1>Column A</h1> 
     </div> 
     <div class="col-md-6"> 
      <h1>Column B</h1> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-6"> 
      <h1>Column C</h1> 
     </div> 
     <div class="col-md-6"> 
      <h1>Column D</h1> 
     </div> 
    </div> 
</div> 

Чем это:

<div class="container"> 
    <div class="col-md-6"> 
     <h1>Column A</h1> 
    </div> 
    <div class="col-md-6"> 
     <h1>Column B</h1> 
    </div> 
</div> 

<div class="container"> 
    <div class="col-md-6"> 
     <h1>Column C</h1> 
    </div> 
    <div class="col-md-6"> 
     <h1>Column D</h1> 
    </div> 
</div> 

Answer 1

Контейнер

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

---

Ряды

Строки всегда должны находиться в контейнере.

Строка предоставляет столбцам место для жизни, в идеале имеющее столбцы, которые содержат до 12. Он также действует как обертка, так как все столбцы плавают влево, а дополнительные строки не имеют перекрытий, когда поплавки становятся странными.

Строки также имеют отрицательный запас 15px с каждой стороны. Div, который составляет строку, обычно будет ограничен внутри заполнения контейнера, касаясь краев розовой области, но не за ее пределами. 15px отрицательные поля выталкивают строку поверх верхней части контейнера 15px, что фактически отрицает ее. Кроме того, строки гарантируют вам, что все из них внутри отображаются в отдельной строке, отделенной от предыдущей и следующих строк.

---

Колонны

Столбцы теперь имеют 15px отступы. Это дополнение означает, что столбцы на самом деле касаются края строки, которая сама касается края контейнера, так как строка имеет отрицательный запас, а контейнер имеет положительное дополнение. Но заполнение столбца подталкивает что-либо внутри столбца туда, где оно должно быть, а также обеспечивает 30px желоба между столбцами. Никогда не используйте столбец за пределами строки, это не сработает.

---

Дополнительную информацию я предлагаю вам прочитать this article. Это действительно понятно и хорошо объясняет, как работает сетчатая система Bootstrap.

Answer 2

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