Отступы

Как это работает

• Горизонтальные отступы между столбцами с использованием padding. Мы устанавливаем padding-right и padding-left для каждого столбца и используем отрицательное значение margin для смещения в начале и конце каждой строки для выравнивания содержимого.

• Начало отступа шириной в 1.5rem (24px). Это позволяет нам сопоставить нашу сетку с масштабом отступов и интервалов полей.

• Отступы могут быть быстро отрегулированы. Используйте специфичные для контрольной точки классы отступов для изменения горизонтальных, вертикальных и сразу всех отступов.

Горизонтальные отступы

Классы .gx-* могут использоваться для управления шириной горизонтального промежутка. Родительский элемент .container или .container-fluid может нуждаться в корректировке, если также используются более крупные промежутка, чтобы избежать нежелательного переполнения, с помощью соответствующей утилиты заполнения. Например, в следующем примере мы увеличили отступ с помощью .px-4:

<divclass="container px-4 text-center"><divclass="row gx-5"><divclass="col"><divclass="p-3">Содержание столбца</div></div><divclass="col"><divclass="p-3">Содержание столбца</div></div></div></div>

Альтернативное решение - добавить оболочку вокруг .row с классом .overflow-hidden:

<divclass="container overflow-hidden text-center"><divclass="row gx-5"><divclass="col"><divclass="p-3">Содержание столбца</div></div><divclass="col"><divclass="p-3">Содержание столбца</div></div></div></div>

Вертикальные отступы

Классы .gy-* могут использоваться для управления шириной вертикального промежутка. Как и горизонтальные промежутки, вертикальные промежутки могут вызвать переполнение под .row в конце страницы. Если это происходит, Вы добавляете оболочку вокруг .row с классом .overflow-hidden:

<divclass="container overflow-hidden text-center"><divclass="row gy-5"><divclass="col-6"><divclass="p-3">Содержание столбца</div></div><divclass="col-6"><divclass="p-3">Содержание столбца</div></div><divclass="col-6"><divclass="p-3">Содержание столбца</div></div><divclass="col-6"><divclass="p-3">Содержание столбца</div></div></div></div>

Горизонтальные и вертикальные отступы

Классы .g-* могут использоваться для управления шириной горизонтального промежутка, в следующем примере мы используем меньшую ширину промежутка, поэтому нет необходимости добавлять класс-оболочку .overflow-hidden.

<divclass="container text-center"><divclass="row g-2"><divclass="col-6"><divclass="p-3">Содержание столбца</div></div><divclass="col-6"><divclass="p-3">Содержание столбца</div></div><divclass="col-6"><divclass="p-3">Содержание столбца</div></div><divclass="col-6"><divclass="p-3">Содержание столбца</div></div></div></div>

Ряды столбцов с отступами

Классы отступов также могут быть добавлены в столбцы строк. В следующем примере мы используем отзывчивые столбцы строк и классы адаптивного отступа.

<divclass="container text-center"><divclass="row row-cols-2 row-cols-lg-5 g-2 g-lg-3"><divclass="col"><divclass="p-3">Колонка ряда</div></div><divclass="col"><divclass="p-3">Колонка ряда</div></div><divclass="col"><divclass="p-3">Колонка ряда</div></div><divclass="col"><divclass="p-3">Колонка ряда</div></div><divclass="col"><divclass="p-3">Колонка ряда</div></div><divclass="col"><divclass="p-3">Колонка ряда</div></div><divclass="col"><divclass="p-3">Колонка ряда</div></div><divclass="col"><divclass="p-3">Колонка ряда</div></div><divclass="col"><divclass="p-3">Колонка ряда</div></div><divclass="col"><divclass="p-3">Колонка ряда</div></div></div></div>

Без промежутков между столбцами

Промежутки между колонками в наших предопределенных классах сетки могут быть удалены с помощью .g-0. Это удаляет отрицательные отступы margin из .row и горизонтальные padding из всех непосредственных дочерних колонок.

Нужен сквозной дизайн? Удалите родительский файл .container или .container-fluid и добавьте .mx-0 к .row, чтобы предотвратить переполнение.

На практике это выглядит так. Обратите внимание, что Вы можете продолжать использовать это со всеми другими предопределенными классами сетки (включая ширину колонок, адаптивные уровни, изменение порядка и т.д.).

<divclass="row g-0 text-center"><divclass="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div><divclass="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,);