in English

Расстояние

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

На этой странице

Маржа и отступы

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

Используете модуль компоновки CSS Grid? Рассмотрите возможность использования утилиты gap .

Обозначение

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

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

Если свойство является одним из:

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

Где стороны являются одним из:

t- для классов, которые устанавливают margin-topилиpadding-top
b- для классов, которые устанавливают margin-bottomилиpadding-bottom
s- (старт) для классов, которые задаются margin-leftлибо padding-leftв LTR, margin-rightлибо padding-rightв RTL
e- (окончание) для классов, которые установлены margin-rightлибо padding-rightв LTR, margin-leftлибо padding-leftв RTL
x- для классов, которые устанавливают как *-leftи*-right
y- для классов, которые устанавливают как *-topи*-bottom
пусто - для классов, которые устанавливают 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

(Вы можете добавить больше размеров, добавив записи в $spacersпеременную карты Sass.)

Примеры

Вот несколько репрезентативных примеров этих классов:

.mt-0 {
  margin-top: 0 !important;
}

.ms-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не могут). Эти отрицательные поля отключены по умолчанию , но их можно включить в Sass, установив $enable-negative-margins: true.

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

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

Зазор

При использовании display: gridвы можете использовать gapутилиты в родительском контейнере сетки. Это может сэкономить на необходимости добавлять утилиты маржи к отдельным элементам сетки (дочерним элементам display: gridконтейнера). Утилиты Gap по умолчанию реагируют и генерируются с помощью нашего API утилит на основе $spacersкарты Sass.

Элемент сетки 1

Элемент сетки 2

Элемент сетки 3

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Поддержка включает в себя адаптивные параметры для всех контрольных точек сетки Bootstrap, а также шесть размеров из $spacersкарты ( 0- 5). .gap-autoВспомогательного класса нет , поскольку он фактически такой же, как .gap-0.

Сасс

Карты

Утилиты Spacing объявляются через карту Sass, а затем генерируются с помощью нашего API утилит.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

API утилит

Утилиты Spacing объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),