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>

Отрицателен марж

В 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 py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>