Удаление желоба из столбцов сетки в Bootstrap 4 [копия]

На этот вопрос уже есть ответ здесь:

Bootstrap - Как убрать водосточный желоб между колоннами 4 ответа

Как создать сетку без желоба в bootstrap 4?

Есть ли официальный API для удаления желоба или он ручной?

Ответы на вопрос(5)

Решение Вопроса

Bootstrap4: Приходит с.no-gutters из коробки. источник:https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap3:

Требуется пользовательский CSS.

Стили:

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Затем использовать:

<div class="row no-gutters">
  <div class="col-xs-4">...</div>
  <div class="col-xs-4">...</div>
  <div class="col-xs-4">...</div>
</div>

Будет:

Убрать поле из строкиУдалить отступы из всех столбцов прямо под строкой

.container или же.container-fluid.

Тем не менее, если вам нужно удалить отступы от.row и непосредственные дочерние столбцы вы должны добавить класс.no-gutters с кодом из @Brian выше в ваш собственный файл CSS, на самом деле это не «прямо из коробки», проверьте здесь официальные подробности о финальной версии Bootstrap 4:https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

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

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

.no-gutter.row,
.no-gutter.container,
.no-gutter.container-fluid{
  margin-left: 0;
  margin-right: 0;
}

.no-gutter>[class^="col-"]{
  padding-left: 0;
  padding-right: 0;
}

make-col-ready и установите ширину желоба на ноль:

@include make-col-ready(0);

Ваш ответ на вопрос