Извлечение прокладки для сточных вод из столбцов сетки в Bootstrap 4

Question

Как создать сетку без бороды в бутстрапе 4?

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

Answer 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> 

Он:

• Удалить запас из ряда
• Удалить отступы со всех колонок непосредственно под строка

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

Answer 3

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

@include make-col-ready(0);

Answer 4

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

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