Отступы

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

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

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

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

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

Колонка ряда

<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">Колонка ряда</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.

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

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

Изменение параметров отступов

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