Желоба
Промежутки — это отступы между вашими столбцами, используемые для гибкого размещения и выравнивания содержимого в сеточной системе Bootstrap.
Как они работают
-
Желоба — это промежутки между содержимым столбцов, созданные горизонтальными элементами
padding
. Мы устанавливаемpadding-right
иpadding-left
для каждого столбца и используем отрицательноеmargin
значение, чтобы сместить это в начале и конце каждой строки, чтобы выровнять содержимое. -
Желоба начинаются с
1.5rem
(24px
) ширины. Это позволяет нам сопоставить нашу сетку с масштабом отступов и полей . -
Водосточные желоба можно гибко регулировать. Используйте классы желобов для конкретных точек останова, чтобы изменить горизонтальные желоба, вертикальные желоба и все желоба.
Горизонтальные желоба
.gx-*
классы могут использоваться для управления шириной горизонтального желоба. Родительский элемент .container
или .container-fluid
может потребоваться скорректировать, если также используются более крупные желоба, чтобы избежать нежелательного переполнения, используя соответствующую утилиту заполнения. Например, в следующем примере мы увеличили отступ с помощью .px-4
:
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Альтернативное решение — добавить оболочку вокруг .row
класса .overflow-hidden
:
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Вертикальные желоба
.gy-*
классы могут использоваться для управления шириной вертикального желоба. Как и горизонтальные промежутки, вертикальные промежутк�� могут вызвать некоторое переполнение ниже .row
в конце страницы. Если это происходит, вы добавляете оболочку .row
с .overflow-hidden
классом:
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Горизонтальные и вертикальные желоба
.g-*
классы могут использоваться для управления шириной горизонтального желоба, в следующем примере мы используем меньшую ширину желоба, поэтому нет необходимости добавлять .overflow-hidden
класс-оболочку.
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Водосточные желоба рядных колонн
Классы Gutter также могут быть добавлены к столбцам строки . В следующем примере мы используем адаптивные столбцы строк и адаптивные классы промежутков.
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>
Нет желобов
Желоба между столбцами в наших предопределенных классах сетки можно удалить с помощью .g-0
. Это удаляет отрицательные margin
s .row
и горизонтали padding
из всех непосредственных дочерних столбцов.
Нужен дизайн от края до края? Отбросьте родителя .container
или .container-fluid
.
На практике вот как это выглядит. Обратите внимание, что вы можете продолжать использовать это со всеми другими предопределенными классами сетки (включая ширину столбцов, адаптивные уровни, изменение порядка и т. д.).
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Изменить желоба
Классы строятся из $gutters
карты Sass, которая унаследована от $spacers
карты Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);