Перейти к основному содержанию

Spacing

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

Содержание

Как это устроено

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

Обозначение

Утилиты интервалов, которые применяются ко всем точкам останова, от xs до xxl, не имеют аббревиатуры точки останова. Это связано с тем, что эти классы применяются min-width: 0 сверху вниз и, следовательно, не связаны медиа-запросом. Остальные точки останова, однако, содержат аббревиатуру точки останова.

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

Если недвижимость относится к одному из:

Где сторона одна из:

Где размер один из:

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

Отрицательный margin

В CSS margin свойства могут использовать отрицательные значения (padding не могут). Эти отрицательные поля отключены по умолчанию , но могут быть включены в Sass путем установки $enable-negative-margins: true.

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

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