Інтервал

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>

Від'ємна маржа

У CSS marginвластивості можуть використовувати від’ємні значення ( paddingне можна). Починаючи з версії 4.2, ми додали утиліти негативної маржі для кожного ненульового цілого розміру, переліченого вище (наприклад, 1, 2, 3, 4, 5). Ці утиліти ідеально підходять для налаштування жолобів стовпців сітки через точки розриву.

Синтаксис майже такий самий, як утиліти позитивної маржі за замовчуванням, але з додаванням nперед запитуваним розміром. Ось приклад класу, протилежного до .mt-1:

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

Ось приклад налаштування сітки Bootstrap на середній ( md) точці зупину та вище. Ми збільшили .colвідступ за допомогою .px-md-5, а потім протидіяли цьому .mx-md-n5за допомогою батьківського елемента .row.

Настроюване заповнення стовпців

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>