Отступы

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
blank - для классов, которые задают 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

(Вы можете добавить больше размеров, добавляя разделы в карту 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>