Отступы

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

• Отступы — это промежутки между содержимым столбцов, созданные горизонтальными padding. Мы устанавливаем padding-right и padding-left для каждого столбца и используем отрицательные margin для смещения их в начале и конце каждой строки, чтобы выровнять содержимое.

• Отступы начинаются с 1.5rem (24px) в ширину. Это позволяет нам согласовать нашу сетку с масштабом отступов и полей.

• Отступы можно изменять с учетом адаптивности. Используйте классы отступов, специфичные для точек останова, чтобы изменить горизонтальные отступы, вертикальные отступы и все отступы.

Горизонтальные отступы

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

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

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

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

Вертикальные отступы

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

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

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

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

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

Отступы строк и столбцов

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

<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">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
  </div>
</div>

Отсутствие отступов

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

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

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

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

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

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