Отступы
Отступы между столбцами используются для гибкого размещения и выравнивания содержимого в системе сеток 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">Пользовательские внутренние отступы колонок</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Пользовательские внутренние отступы колонок</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">Пользовательские внутренние отступы колонок</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Пользовательские внутренние отступы колонок</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">Пользовательские внутренние отступы колонок</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Пользовательские внутренние отступы колонок</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Пользовательские внутренние отступы колонок</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Пользовательские внутренние отступы колонок</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">Пользовательские внутренние отступы колонок</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Пользовательские внутренние отступы колонок</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Пользовательские внутренние отступы колонок</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Пользовательские внутренние отступы колонок</div>
</div>
</div>
</div>
Ряды столбцов с отступами
Классы отступов также могут быть добавлены в столбцы строк. В следующем примере мы используем отзывчивые столбцы строк и классы адаптивного отступа.
<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">Колонка ряда</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Колонка ряда</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Колонка ряда</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Колонка ряда</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Колонка ряда</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Колонка ряда</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Колонка ряда</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Колонка ряда</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Колонка ряда</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Колонка ряда</div>
</div>
</div>
</div>
Без промежутков между столбцами
Промежутки между колонками в наших предопределенных классах сетки могут быть удалены с помощью .g-0
. Это удаляет отрицательные отступы margin
из .row
и горизонтальные padding
из всех непосредственных дочерних колонок.
Нужен сквозной дизайн? Удалите родительский файл .container
или .container-fluid
и добавьте .mx-0
к .row
, чтобы предотвратить переполнение.
На практике это выглядит так. Обратите внимание, что Вы можете продолжать использовать это со всеми другими предопределенными классами сетки (включая ширину колонок, адаптивные уровни, изменение порядка и т.д.).
<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>
Изменение параметров отступов
Классы строятся из карты Sass $gutters
, унаследованной от карты Sass $spacers
.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);