Удаление заглушки из столбцов сетки в Bootstrap 4

Ответ 1

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>

Он будет:

• Удалить поле из строки
• Удалите заполнение из всех столбцов непосредственно под строкой

Ответ 2

Вы можете использовать этот код css, чтобы получить сетку без остатка в бутстрапе.

.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;
}

Ответ 3

Вы можете использовать mixin make-col-ready и установить ширину желоба в ноль:

@include make-col-ready(0);

Ответ 4

Нужен дизайн от края до края? Отпустите родительский .container или .container-fluid.

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