Как лучше всего удалять отступы во вложенных файлах Bootstrap .col с родителем .container?

Question

Контекст

Я считаю, что верно следующее:

• Bootstrap 4 добавляет левый и правый отступ к .col.
• .row не имеет заполнения, но если в нем есть col, они имеют.
• .container имеет заполнение слева и справа.И вложенный col делает то же самое.

Пример ниже приводит к вложенному заполнению.

<div class='container'>
  <div class='col'>
    <div class='row'>
      <div class='col'></div>
    </div>
  </div>
</div>

Но этот пример не приводит к заполнению.

<div class='row'>
  <div class='col'>
    <div class='row'>
      <div class='col'></div>
    </div>
  </div>
</div>

Цель

Мне нужно, чтобы у моего родительского контейнера было заполнение, но все, что в нем , а не , имеет внешнее левое и правое заполнение.

Если .row> .col> .row является официальным решением Bootstrap для удаления внутренних отступов (но без заполнения родительского контейнера), то каков наилучший способ достижения этого с внешними отступами для родителя?

Answer 1

Вы можете добавить класс без водосточного желоба в строку.

.no-gutters

Подробно здесь: https://getbootstrap.com/docs/4.0/layout/grid/

Кроме того, столбцы почти всегда должны находиться внутри строки, поэтому вам следует добавить еще одну строку перед первым столбцом.