Интервалы

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

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

Обозначение

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

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

Где property - это:

• m - для классов, устанавливающих margin
• p - для классов, устанавливающих padding

Где sides - это:

• t - для классов, устанавливающих margin-top или padding-top
• b - для классов, устанавливающих margin-bottom или padding-bottom
• s - (начало) для классов, устанавливающих margin-left или padding-left в LTR, margin-right или padding-right в RTL
• e - (конец) для классов, устанавливающих margin-right или padding-right в LTR, margin-left или padding-left в RTL
• x - для классов, устанавливающих как *-left, так и *-right
• y - для классов, устанавливающих как *-top, так и *-bottom
• пусто - для классов, устанавливающих margin или padding по всем 4 сторонам элемента

Где size - это:

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

(Вы можете добавить больше размеров, добавив записи в переменную Sass карты $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;">
  Centered element
</div>

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

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

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

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

Пробелы

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

<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 устанавливает вертикальное расстояние между элементами-детьми в указанном контейнере.

<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 устанавливает горизонтальное расстояние между элементами-детьми в указанном контейнере.

<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

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

$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 утилит.

"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
),