Інтервал

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

Як це працює

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

Позначення

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

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

Якщо майно є одним із:

m- для класів, що набірmargin
p- для класів, що набірpadding

Де сторони є одним із:

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
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;
}

.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>