Отступы

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>

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

В CSS свойства полей margin могут использовать отрицательные значения (padding не может). Начиная с версии 4.2, мы добавляли утилиты с отрицательным запасом для каждого ненулевого целочисленного размера, указанного выше (например, 1, 2, 3, 4, 5). Эти утилиты идеально подходят для настройки желобов столбцов сетки через точки останова (breakpoints).

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

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

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

Custom column padding
Custom column padding
<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>