Інтервал
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
- для класів, які встановлюють значенняmargin
auto
(Ви можете додати більше розмірів, додавши записи до $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>