Bootstrap'ом редко пользовался, как-то не вникал в эти положительные и отрицательные отступы блоков.
Подскажите, для чего в блоке .container
положительный padding, а в блоке .row
отрицательный margin? Какая практическая польза в этих отступах?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуBootstrap'ом редко пользовался, как-то не вникал в эти положительные и отрицательные отступы блоков.
Подскажите, для чего в блоке .container
положительный padding, а в блоке .row
отрицательный margin? Какая практическая польза в этих отступах?
Это сделано для выравнивания.
У каждой колонки слева и справа есть padding
, равный 15px
. Он нужен для генерации одинакового отступа между колонками. Однако в этом случае отступ слева у первой и отступ справа у последней колонки в строке складывается с отступами контейнера.
Чтобы нивелировать его используется .row
с отрицательным margin
равным 15px
. Если использовать .row
, то левый отступ у первого столбца и правый отступ у правого столбца "проваливаются" в уже существующие отступы у контейнера и не занимают дополнительного места.
На вопрос почему бы не убрать отступ у контейнера и отказаться от отрицательного margin
у .row
ответ простой: блоков с контейнером может быть несколько, и в одном из них может отсутствовать сетка.
Чтобы блоки с сеткой и без нее были выравнены по левой и правой границе, как раз и придумали этот прием с отрицательными margin
. А сам padding
у контейнера еще нужен и для того, чтобы его содержимое не прилипало к границе экрана на небольших разрешениях.
update: при многократной вложенности, в качестве контейнера выступает уже колонка, а принцип действия тот же самый.
Отрицательный отступ у .row для того, чтобы при многоуровневой структуре не суммировались отступы у блоков разных уровней.
<div class="row">
<div class="col-sm-12" id="outer">
<div class="row">
<div class="col-sm-12" id="inner">
</div>
</div>
</div>
В приведенном примере блок #inner будет по размеру такой же как блок #outer. Если бы у row не было отрицательных отступов, то блок #inner был бы меньше блока #outer на 15px с каждой стороны.