Bootstrap Gutters (отступы)

Gutters - это отступы между столбцами, используемые для гибкого размещения и выравнивания содержимого в системе сетки Bootstrap. Давайте подробнее рассмотрим, как работают отступы, и рассмотрим практические примеры.

Принцип работы

Горизонтальные отступы:
- Gutters - это, по сути, промежутки между содержимым колонок, достигаемые с помощью горизонтальных отступов.
- Для каждой колонки мы устанавливаем padding-right и padding-left.
- Для выравнивания контента без видимых отступов используются отрицательные отступы в начале и конце каждой строки.
Ширина стандартных промежутков:
- В Bootstrap 5 стандартная ширина промежутков составляет 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">Настройка отступов колонок</div>
    </div>
    <div class="col">
      <div class="p-3">Настройка отступов колонок</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">Пользовательское заполнение столбцов</div>
    </div>
    <div class="col">
      <div class="p-3">Пользовательское заполнение столбцов</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">Пользовательское заполнение столбцов</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.

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

Результат:

Пользовательское заполнение столбцов

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

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

<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. При этом удаляются отрицательные margins из .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>

Результат:

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

.col-6 .col-md-4

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

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

Заключение

Отступы в Bootstrap 5 предоставляют мощные инструменты для создания адаптивных макетов. Они позволяют контролировать расстояние между колонками, обеспечивая гармоничное размещение контента. Вам доступны различные варианты настройки горизонтальных и вертикальных промежутков, а также возможность изменять их в зависимости от разрешения экрана.

Экспериментируйте с разными ширинами промежутков, учитывая особенности вашего проекта. Не забывайте также о правильной настройке родительских элементов .container или .container-fluid, чтобы избежать нежелательного переполнения.

С применением промежутков Bootstrap 5 вы сможете создавать современные, эффективные и красивые веб-сайты.

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