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

В соответствии с Документация по загрузке

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

и

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

Почему это необходимо?

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

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

<div>
 <div>
 <div>
 <h1>Column A</h1>
 </div>
 <div>
 <h1>Column B</h1>
 </div>
 </div>
 <div>
 <div>
 <h1>Column C</h1>
 </div>
 <div>
 <h1>Column D</h1>
 </div>
 </div>
</div>

Чем это:

<div>
 <div>
 <h1>Column A</h1>
 </div>
 <div>
 <h1>Column B</h1>
 </div>
 </div>
<div>
 <div>
 <h1>Column C</h1>
 </div>
 <div>
 <h1>Column D</h1>
 </div>
</div>
2 ответа

Container

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

Ряды

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

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

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

Столбцы

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

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


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

licensed under cc by-sa 3.0 with attribution.