Желоба

Желоба — это отступы между вашими колонками, используемые для отзывчивого размещения и выравнивания содержимого в системе сетки Bootstrap.

На этой странице

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

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

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

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

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

html

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3">Пользовательские отступы колонки</div>
    </div>
    <div class="col">
      <div class="p-3">Пользовательские отступы колонки</div>
    </div>
  </div>
</div>

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

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

html

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3">Пользовательские отступы колонки</div>
    </div>
    <div class="col">
      <div class="p-3">Пользовательские отступы колонки</div>
    </div>
  </div>
</div>

Вертикальные желоба

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

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

html

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3">Пользовательские отступы колонки</div>
    </div>
    <div class="col-6">
      <div class="p-3">Пользовательские отступы колонки</div>
    </div>
    <div class="col-6">
      <div class="p-3">Пользовательские отступы колонки</div>
    </div>
    <div class="col-6">
      <div class="p-3">Пользовательские отступы колонки</div>
    </div>
  </div>
</div>

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

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

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

html

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3">Пользовательские отступы колонки</div>
    </div>
    <div class="col-6">
      <div class="p-3">Пользовательские отступы колонки</div>
    </div>
    <div class="col-6">
      <div class="p-3">Пользовательские отступы колонки</div>
    </div>
    <div class="col-6">
      <div class="p-3">Пользовательские отступы колонки</div>
    </div>
  </div>
</div>

Желоба строчных колонок

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

Строчная колонка

html

<div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3">Строчная колонка</div>
    </div>
    <div class="col">
      <div class="p-3">Строчная колонка</div>
    </div>
    <div class="col">
      <div class="p-3">Строчная колонка</div>
    </div>
    <div class="col">
      <div class="p-3">Строчная колонка</div>
    </div>
    <div class="col">
      <div class="p-3">Строчная колонка</div>
    </div>
    <div class="col">
      <div class="p-3">Строчная колонка</div>
    </div>
    <div class="col">
      <div class="p-3">Строчная колонка</div>
    </div>
    <div class="col">
      <div class="p-3">Строчная колонка</div>
    </div>
    <div class="col">
      <div class="p-3">Строчная колонка</div>
    </div>
    <div class="col">
      <div class="p-3">Строчная колонка</div>
    </div>
  </div>
</div>

Отсутствие желобов

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

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

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

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

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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,
);