Cмотреть на GitHub

Интервал

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

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

Поля и отступы

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

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

Примечание

Утилиты интервалов, которые применяются ко всем контрольным точкам, от xs до xxl, не имеют в них аббревиатуры контрольные точки. Это связано с тем, что эти классы применяются начиная с min-width: 0 и выше и поэтому не связаны медиа-запросом. Остальные контрольные точки, однако, содержат аббревиатуру контрольные точки.

Классы именуются в формате {property}{sides}-{size} для xs и {property}{sides}-{breakpoint}-{size} для sm, md, lg, xl и xxl.

Где свойство - одно из:

m - для классов, которые устанавливают margin
p - для классов, которые устанавливают padding

Где стороны - одна из:

t - для классов, которые устанавливают margin-top или padding-top
b - для классов, которые устанавливают margin-bottom или padding-bottom
s - (start) для классов, которые устанавливают margin-left или padding-left в LTR, margin-right или padding-right в RTL
e - (end) для классов, которые устанавливают margin-right или padding-right в LTR, margin-left или padding-left в RTL
x - для классов, которые устанавливают оба *-left и *-right
y - для классов, которые устанавливают оба *-top и *-bottom
blank - для классов, которые устанавливают a margin или padding со всех 4 сторон элемента

Где размер - один из:

0 - или классы, устраняющие margin или padding установив его на 0
1 - (по умолчанию) для классов, которые устанавливают the margin или padding равным $spacer * .25
2 - (по умолчанию) для классов, которые устанавливают the margin или padding равным $spacer * .5
3 - (по умолчанию) для классов, которые устанавливают the margin или padding равным $spacer
4 - (по умолчанию) для классов, которые устанавливают the margin или padding равным $spacer * 1.5
5 - (по умолчанию) для классов, которые устанавливают the margin или padding равным $spacer * 3
auto - для классов, которые устанавливают margin равным авто

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

Примеры

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

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

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

Кроме того, Bootstrap также включает класс .mx-auto для горизонтального центрирования содержимого уровня блока фиксированной ширины, то есть содержимого, имеющего набор display: block и width, путем установки горизонтальных полей на auto.

Центрированный элемент

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

Отрицательные отступы

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

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

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

Разрыв

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

Grid item 1

Grid item 2

Grid item 3

Grid item 4

html

<div class="grid gap-3">
  <div class="p-2 g-col-6">Grid item 1</div>
  <div class="p-2 g-col-6">Grid item 2</div>
  <div class="p-2 g-col-6">Grid item 3</div>
  <div class="p-2 g-col-6">Grid item 4</div>
</div>

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

row-gap

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

Grid item 1

Grid item 2

Grid item 3

Grid item 4

html

<div class="grid gap-0 row-gap-3">
  <div class="p-2 g-col-6">Grid item 1</div>
  <div class="p-2 g-col-6">Grid item 2</div>
  <div class="p-2 g-col-6">Grid item 3</div>
  <div class="p-2 g-col-6">Grid item 4</div>
</div>

column-gap

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

Grid item 1

Grid item 2

Grid item 3

Grid item 4

html

<div class="grid gap-0 column-gap-3">
  <div class="p-2 g-col-6">Grid item 1</div>
  <div class="p-2 g-col-6">Grid item 2</div>
  <div class="p-2 g-col-6">Grid item 3</div>
  <div class="p-2 g-col-6">Grid item 4</div>
</div>

CSS

Sass карты

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

scss/_variables.scss

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

Sass API утилиты

Утилиты интервалов объявлены в нашем 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
),