Интервалы

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.

<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>