Vahekaugus

Bootstrap sisaldab elemendi välimuse muutmiseks laias valikus kiirkirjas kasutatavaid veerise ja polsterduse utiliidi klasse.

Kuidas see töötab

Määrake kiirkirjaklassidega elemendile või selle külgede alamhulgale reageerimissõbralikkus marginvõi väärtused. paddingSisaldab üksikute atribuutide, kõigi atribuutide ning vertikaalsete ja horisontaalsete atribuutide tuge. Klassid on koostatud Sassi vaikekaardilt vahemikus .25remkuni 3rem.

Märge

Kõigile murdepunktidele (alates xskuni xl) kehtivatel vaheutiliitidel pole murdepunktide lühendit. Selle põhjuseks on asjaolu, et neid klasse rakendatakse alates min-width: 0ja üles ning seega ei seo neid meediumipäring. Ülejäänud murdepunktid sisaldavad aga katkestuspunktide lühendit.

Klassid on nimetatud vormingus {property}{sides}-{size}, , , xsja {property}{sides}-{breakpoint}-{size}jaoks .smmdlgxl

Kui vara on üks järgmistest:

m- klasside jaoks, mis seavadmargin
p- klasside jaoks, mis seavadpadding

Kus küljed on üks järgmistest:

t- klassidele, mis seavad margin-topvõipadding-top
b- klassidele, mis seavad margin-bottomvõipadding-bottom
l- klassidele, mis seavad margin-leftvõipadding-left
r- klassidele, mis seavad margin-rightvõipadding-right
x- klassidele, mis määravad nii *-leftja*-right
y- klassidele, mis määravad nii *-topja*-bottom
tühi – klasside jaoks, mis määravad a marginvõi paddingelemendi kõigile neljale küljele

Kui suurus on üks järgmistest:

0- klassidele, mis kõrvaldavad marginvõi paddingmäärates selle0
1- (vaikimisi) klasside jaoks, mis määravad marginvõipadding$spacer * .25
2- (vaikimisi) klasside jaoks, mis määravad marginvõipadding$spacer * .5
3- (vaikimisi) klasside jaoks, mis määravad marginvõipadding$spacer
4- (vaikimisi) klasside jaoks, mis määravad marginvõipadding$spacer * 1.5
5- (vaikimisi) klasside jaoks, mis määravad marginvõipadding$spacer * 3
auto- klassidele, mis määravad marginautomaatseks

(Saate lisada rohkem suurusi, lisades kirjeid $spacersSassi kaardimuutujale.)

Näited

Siin on mõned tüüpilised näited nendest klassidest:

.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;
}

Horisontaalne tsentreerimine

Lisaks sisaldab Bootstrap ka .mx-autoklassi fikseeritud laiusega plokitaseme sisu, st sisu, millel on display: blockja widthkomplekt, horisontaalseks tsentreerimiseks, määrates horisontaalsed veerised väärtusele auto.

Tsentreeritud element

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>