Желоба

Промежутки — это отступы между вашими столбцами, используемые для гибкого размещения и выравнивания содержимого в сеточной системе 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. Это удаляет отрицательные margins .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карты 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,
);