Отступы

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

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

Margin и padding

Присвойте адаптивно-дружественные значения 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.

Где property - одно из:

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

Где sides - одно из:

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

.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 p-2" style="width: 200px;">
  Центрированный элемент
</div>

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

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

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

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

Gap

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

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

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

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

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

html

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
  <div class="p-2">Элемент сетки 1</div>
  <div class="p-2">Элемент сетки 2</div>
  <div class="p-2">Элемент сетки 3</div>
  <div class="p-2">Элемент сетки 4</div>
</div>

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

row-gap

row-gap устанавливает вертикальное пространство между дочерними элементами в указанном контейнере.

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

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

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

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

html

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
  <div class="p-2">Элемент сетки 1</div>
  <div class="p-2">Элемент сетки 2</div>
  <div class="p-2">Элемент сетки 3</div>
  <div class="p-2">Элемент сетки 4</div>
</div>

column-gap

column-gap устанавливает горизонтальное пространство между дочерними элементами в указанном контейнере.

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

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

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

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

html

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
  <div class="p-2">Элемент сетки 1</div>
  <div class="p-2">Элемент сетки 2</div>
  <div class="p-2">Элемент сетки 3</div>
  <div class="p-2">Элемент сетки 4</div>
</div>

CSS

Sass-карты

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

scss/_variables.scss

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

Sass API утилит

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

scss/_utilities.scss

"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
),
// Gap utility
"gap": (
  responsive: true,
  property: gap,
  class: gap,
  values: $spacers
),
"row-gap": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $spacers
),
"column-gap": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $spacers
),