Интервал
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 - за класове, които задават a
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>