Інтервал

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

На цій сторінці

Поля та відступи

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

Використовуєте модуль макета CSS Grid? Розгляньте можливість використання утиліти gap .

Позначення

Утиліти створення інтервалів, які застосовуються до всіх точок зупину, від xsдо xxl, не містять абревіатури точки зупину. Це пояснюється тим, що ці класи застосовуються від min-width: 0і догори, і тому вони не зв’язані медіа-запитом. Решта контрольних точок, однак, включають абревіатуру контрольної точки.

Класи називаються у форматі {property}{sides}-{size}for xsі {property}{sides}-{breakpoint}-{size}for 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
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- для класів, які встановлюють значення marginauto

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

Сасс

Карти

Утиліти інтервалів оголошуються через карту 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 утиліт

Утиліти проміжків оголошено в нашому 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
    ),