Source

Расстояние

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значение auto

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

Примеры

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

.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;">
  Centered element
</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 py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>