Интервалы

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

Устанавливает margin (внешние границы) или padding (внутренние границы) элементу по умолчанию в диапазоне от .25rem до 3rem.

Форматы классов:

xs: {property}{sides}-{size}

sm, md, lg, xl и xxl {property}{sides}-{breakpoint}-{size}

Значения составляющих:

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

blank - 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 = авто

Пример:

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

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

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

Пример

Класс, противоположный .mt-1:

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