Gutters

Как они работают

Промежутки - это промежутки между содержимым столбца, созданные по горизонтали padding. Мы устанавливаем padding-right и padding-left для каждого столбца и используем отрицательное значение margin для смещения этого значения в начале и в конце каждой строки для выравнивания содержимого.
Старт желобов 1.5rem (20px) широкие. Это позволяет нам согласовать нашу сетку с масштабом отступов и разделителей полей.
Желоба можно адаптировать. Используйте классы желобов, зависящие от точки останова, для изменения горизонтальных желобов, вертикальных желобов и всех желобов.

Горизонтальные gutters

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

Вертикальные gutters

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

Горизонтальные и вертикальные gutters

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

Gutters рядных колонн

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

Строка столбец

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

Без gutters

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

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

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

.col-sm-6 .col-md-8

.col-6 .col-md-4

<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

Классы строятся из $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,
);