View on GitHub

Интервал

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

Как это работает

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

Обозначение

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

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

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

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

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

  • t - для классов, которые устанавливают margin-top или padding-top
  • b - для классов, которые устанавливают margin-bottom или padding-bottom
  • l - для классов, которые устанавливают margin-left или padding-left
  • r - для классов, которые устанавливают margin-right или padding-right
  • x - для классов, которые устанавливают оба *-left и *-right
  • y - для классов, которые устанавливают оба *-top и *-bottom
  • пустой - для классов, которые устанавливают margin или padding со всех 4 сторон элемента

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

  • 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 на авто

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

Примеры

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

.mt-0 {
  margin-top: 0 !important;
}

.ml-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 не могут). Начиная с версии 4.2, мы добавили утилиты с отрицательными полями для каждого ненулевого целого размера, указанного выше (например, 1, 2, 3, 4, 5). Эти утилиты идеально подходят для настройки полей столбцов сетки в контрольных точках.

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

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

Вот пример настройки сетки Bootstrap в средней контрольной точке (md) и выше. Мы увеличили отступы .col с помощью .px-md-5, а затем нейтрализовали это с помощью .mx-md-n5 в родительском .row.

Пользовательские отступы столбцов
Пользовательские отступы столбцов
<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Пользовательские отступы столбцов</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Пользовательские отступы столбцов</div></div>
</div>