Bootstrap 5 Spacing: Как управлять отступами и полями

Bootstrap 5 предоставляет множество удобных классов для управления отступами и полями между элементами. Эти классы позволяют быстро настраивать внешний вид элементов на вашем веб-сайте. Давайте рассмотрим, как использовать эти утилиты.

Отступы (Margin) и Поля (Padding)

Bootstrap предоставляет следующие классы для добавления отступов и полей:

  • Margin (m): Классы, устанавливающие внешний отступ (margin) для элемента.
  • Padding (p): Классы, устанавливающие внутренний отступ (padding) для элемента.

Присваивайте элементу или подмножеству его сторон значения margin или padding, удобные для адаптации, с помощью сокращенных классов. Включает поддержку отдельных свойств, всех свойств, а также вертикальных и горизонтальных свойств. Классы создаются на основе карты Sass по умолчанию в диапазоне от .25rem до 3rem.

Используете модуль компоновки CSS Grid? Рассмотрите возможность использования утилиты gap вместо этого.

Нотация

  • Классы, применяемые ко всем разрешениям экрана (от xs до xxl), не имеют аббревиатуры разрешения. Они применяются от min-width: 0 и выше, не ограничиваясь медиа-запросами.
  • Остальные разрешения включают аббревиатуру разрешения. Классы называются в формате {свойство}{стороны}-{размер} для xs и {свойство}{стороны}-{разрешение}-{размер} для sm, md, lg, xl и xxl.

Где:

  • {свойство}:
    • m - для установки внешнего отступа (margin).
    • p - для установки внутреннего отступа (padding).
  • {стороны}:
    • t - верхняя сторона (top).
    • b - нижняя сторона (bottom).
    • s - начальная сторона (start) в LTR (margin-left или padding-left) или конечная сторона (end) в RTL (margin-right или padding-right).
    • e - конечная сторона (end) в LTR (margin-right или padding-right) или начальная сторона (start) в RTL (margin-left или padding-left).
    • x - обе стороны по горизонтали (left и right).
    • y - обе стороны по вертикали (top и bottom).
    • Пустое значение - установка отступа или поля для всех 4 сторон элемента.
  • {размер}:
    • 0 - убирает отступ или поле, устанавливая его в 0.
    • 1 (по умолчанию) - устанавливает отступ или поле в $spacer * .25.
    • 2 (по умолчанию) - устанавливает отступ или поле в $spacer * .5.
    • 3 (по умолчанию) - устанавливает отступ или поле в $spacer.
    • 4 (по умолчанию) - устанавливает отступ или поле в $spacer * 1.5.
    • 5 (по умолчанию) - устанавливает отступ или поле в $spacer * 3.
    • auto - устанавливает отступ в автоматический режим.

(Вы можете добавить больше размеров, добавив записи в $spacers переменную Sass map.)

Примеры

Вот несколько типичных примеров этих классов:

.mt-0 {
  margin-top: 0 !important;
}
.ms-1 {
  margin-left: ($spacer * .25) !important;
}
.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}
.p-3 {
  padding: $spacer !important;
}
<div class="mt-0">Без верхнего отступа</div>
<div class="ms-1">Левый отступ: 0.25rem</div>
<div class="px-2">Внутренний отступ по горизонтали: 0.5rem</div>
<div class="p-3">Внутренний отступ: 1rem</div>
Результат:
Без верхнего отступа
Левый отступ: 0.25rem
Внутренний отступ по горизонтали: 0.5rem
Внутренний отступ: 1rem

Горизонтальное центрирование

Горизонтальное центрирование элементов на веб-странице — это важная задача для создания эстетичного и сбалансированного дизайна. В Bootstrap 5 есть несколько способов достичь горизонтального центрирования.

Центрирование с помощью класса mx-auto

Класс mx-auto применяется к блочному элементу (например, <div>, <section>, <article>), чтобы центрировать его по горизонтали. Этот класс устанавливает автоматический отступ по горизонтали, что приводит к центрированию элемента.

<div class="mx-auto p-2" style="width: 200px;">
  Центрированный элемент
</div>
Результат:
Центрированный элемент

Использование класса text-center

Класс text-center применяется к текстовым элементам (например, заголовкам, параграфам), чтобы центрировать текст по горизонтали. Он также может использоваться для центрирования других элементов, содержащих текст.

<h1 class="text-center">Заголовок</h1>
<p class="text-center">Этот текст будет горизонтально центрирован</p>
Результат:

Заголовок

Этот текст будет горизонтально центрирован

Гибкое центрирование с помощью d-flex и justify-content-center

Если вам нужно центрировать не только текст, но и другие элементы, вы можете использовать классы d-flex и justify-content-center. d-flex превращает контейнер в гибкий контейнер, а justify-content-center выравнивает элементы по центру по горизонтали.

<div class="d-flex justify-content-center">
    <button class="btn btn-primary">Центрированная кнопка</button>
</div>
Результат:

Центрирование с помощью position и left / right

Если вам нужно центрировать элемент с абсолютным позиционированием, вы можете использовать следующий CSS:

.centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Примените класс .centered к вашему элементу:

<div class="centered">
    Этот элемент будет горизонтально центрирован
</div>
Результат:
Этот элемент будет горизонтально центрирован

Отрицательный margin

В CSS margin свойства могут использовать отрицательные значения (padding не могут). Эти отрицательные поля отключены по умолчанию, но могут быть включены в Sass с помощью настройки $enable-negative-margins: true.

Синтаксис почти такой же, как у утилит с положительным запасом по умолчанию, но с добавлением n перед запрошенным размером. Вот пример класса, противоположного .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Gap (разрыв)

При использовании display: grid или display: flex вы можете использовать gap утилиты для родительского элемента. Это позволяет сэкономить на необходимости добавлять утилиты для полей к отдельным дочерним элементам контейнера grid или flex. Утилиты Gap по умолчанию адаптивны и создаются с помощью нашего API утилит на основе $spacers карты Sass.

<div class="grid gap-3">
  <div class="p-2 g-col-6">Элемент сетки 1</div>
  <div class="p-2 g-col-6">Элемент сетки 2</div>
  <div class="p-2 g-col-6">Элемент сетки 3</div>
  <div class="p-2 g-col-6">Элемент сетки 4</div>
</div>
Результат:
Элемент сетки 1
Элемент сетки 2
Элемент сетки 3
Элемент сетки 4

Поддержка включает адаптивные опции для всех точек останова сетки Bootstrap, а также шесть размеров из $spacers карты (0–5). Здесь нет .gap-auto служебного класса, поскольку он фактически такой же, как .gap-0.

Межстрочный интервал

row-gap устанавливает вертикальный интервал между дочерними элементами в указанном контейнере.

<div class="grid gap-0 row-gap-3">
  <div class="p-2 g-col-6">Элемент сетки 1</div>
  <div class="p-2 g-col-6">Элемент сетки 2</div>
  <div class="p-2 g-col-6">Элемент сетки 3</div>
  <div class="p-2 g-col-6">Элемент сетки 4</div>
</div>
Результат:
Элемент сетки 1
Элемент сетки 2
Элемент сетки 3
Элемент сетки 4

Зазор между столбцами

column-gap задает горизонтальный интервал между дочерними элементами в указанном контейнере.

<div class="grid gap-0 column-gap-3">
  <div class="p-2 g-col-6">Элемент сетки 1</div>
  <div class="p-2 g-col-6">Элемент сетки 2</div>
  <div class="p-2 g-col-6">Элемент сетки 3</div>
  <div class="p-2 g-col-6">Элемент сетки 4</div>
</div>
Результат:
Элемент сетки 1
Элемент сетки 2
Элемент сетки 3
Элемент сетки 4

CSS

Карты Sass

Утилиты Spacing объявляются через Sass map, а затем генерируются с помощью нашего utilities API.

scss/_variables.scss

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

API утилит Sass

Утилиты интервалов объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

scss/_utilities.scss

"margin": (
  responsive: true,
  property: margin,
  class: m,
  values: map-merge($spacers, (auto: auto))
),
"margin-x": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: map-merge($spacers, (auto: auto))
),
"margin-y": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: map-merge($spacers, (auto: auto))
),
"margin-top": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: map-merge($spacers, (auto: auto))
),
"margin-end": (
  responsive: true,
  property: margin-right,
  class: me,
  values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: map-merge($spacers, (auto: auto))
),
"margin-start": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
  responsive: true,
  property: margin,
  class: m,
  values: $negative-spacers
),
"negative-margin-x": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: $negative-spacers
),
"negative-margin-y": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: $negative-spacers
),
"negative-margin-top": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: $negative-spacers
),
"negative-margin-end": (
  responsive: true,
  property: margin-right,
  class: me,
  values: $negative-spacers
),
"negative-margin-bottom": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: $negative-spacers
),
"negative-margin-start": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: $negative-spacers
),
// Padding utilities
"padding": (
  responsive: true,
  property: padding,
  class: p,
  values: $spacers
),
"padding-x": (
  responsive: true,
  property: padding-right padding-left,
  class: px,
  values: $spacers
),
"padding-y": (
  responsive: true,
  property: padding-top padding-bottom,
  class: py,
  values: $spacers
),
"padding-top": (
  responsive: true,
  property: padding-top,
  class: pt,
  values: $spacers
),
"padding-end": (
  responsive: true,
  property: padding-right,
  class: pe,
  values: $spacers
),
"padding-bottom": (
  responsive: true,
  property: padding-bottom,
  class: pb,
  values: $spacers
),
"padding-start": (
  responsive: true,
  property: padding-left,
  class: ps,
  values: $spacers
),
// Gap utility
"gap": (
  responsive: true,
  property: gap,
  class: gap,
  values: $spacers
),
"row-gap": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $spacers
),
"column-gap": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $spacers
),

Часто задаваемые вопросы (FAQ)

Отступы и поля в Bootstrap 5 - это классы, которые позволяют управлять расстоянием между элементами на веб-странице.
Классы для внешних отступов начинаются с m, а для внутренних отступов - с p.
Для внутренних полей кнопок используйте классы px (горизонтальное поле) и py (вертикальное поле).
Bootstrap 5 предоставляет разные размеры отступов: от 0 (без отступа) до 5 (большой отступ).
Центрирование текста можно достичь с помощью класса text-center.
Аббревиатуры разрешения используются для классов отступов в зависимости от размера экрана.
Использование классов для отступов упрощает настройку внешнего вида элементов.
Класс “mx-auto” центрирует блочные элементы по горизонтали.
“d-flex” и “justify-content-center” позволяют гибко центрировать элементы.
CSS-правило “position” с “left” или “right” используется для абсолютного центрирования элементов.

Заключение

Использование классов для управления отступами и полями в Bootstrap 5 позволяет быстро и гибко настраивать внешний вид элементов на вашем сайте. Независимо от того, нужно ли вам добавить отступы между блоками текста или установить внутренние поля для кнопок, Bootstrap предоставляет удобные инструменты для этой задачи. Пользуйтесь ими с умом, чтобы создавать эстетичные и сбалансированные веб-страницы!

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

  1. Отступы (Margin) и Поля (Padding)
    1. Нотация
  2. Примеры
  3. Горизонтальное центрирование
    1. Центрирование с помощью класса mx-auto
    2. Использование класса text-center
    3. Гибкое центрирование с помощью d-flex и justify-content-center
    4. Центрирование с помощью position и left / right
  4. Отрицательный margin
  5. Gap (разрыв)
    1. Межстрочный интервал
    2. Зазор между столбцами
  6. CSS
    1. Карты Sass
    2. API утилит Sass
  7. Часто задаваемые вопросы (FAQ)
  8. Заключение