Перейти к основному содержанию Перейти к навигации по документации
View on 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 - для классов, которые устанавливают 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 равным авто

Примеры

.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 (05). Не существует служебного класса .gap-auto, поскольку он фактически совпадает с .gap-0.