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

Согласно документации Bootstrap

Строки должны быть размещены в пределах .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>
Источник

2 ответа

Решение

Контейнер

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

Ряды

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

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

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

Колонны

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

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

Источник

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

Источник
Другие вопросы по тегам