Оригинал На GitHub

Промежутки

Промежутки - это отступы между колонками, используемые для гибкого размещения и выравнивания содержимого в системе сетки 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 border bg-light">Пользовательские внутренние отступы колонок</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Пользовательские внутренние отступы колонок</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 border bg-light">Пользовательские внутренние отступы колонок</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Пользовательские внутренние отступы колонок</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 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.

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

html

<div class="container text-center">
  <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>

Промежутки колонок ряда

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

Колонка ряда

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 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, чтобы предотвратить переполнение.

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

.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,
);