Оригинал Посмотреть на 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 - (старт) для классов, которые устанавливают 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
blank - для классов, которые устанавливают 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 равным авто

Примеры

.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" style="width: 200px;">
  Центрированный элемент
</div>

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

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

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

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

Разрыв

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

Элемент сетки 1

Элемент сетки 2

Элемент сетки 3

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Элемент сетки 1</div>
  <div class="p-2 bg-light border">Элемент сетки 2</div>
  <div class="p-2 bg-light border">Элемент сетки 3</div>
</div>

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

Sass

Карты

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

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

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

Утилиты API

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