Source

Интервал

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