Интервалы

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

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

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

Нотация

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

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

Где property — это одно из:

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

Где sides — это одно из:

• 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 сторонам элемента

Где size — это одно из:

• 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;">
  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 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>