Source

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>

Negatiivne marginaal

CSS-is võivad marginatribuudid kasutada negatiivseid väärtusi ( paddingei saa). Alates versioonist 4.2 oleme lisanud negatiivse marginaali utiliidid igale ülaltoodud nullist erinevale täisarvu suurusele (nt , , 1, 2, 3) . Need utiliidid on ideaalsed võrgusammaste vihmaveerennide kohandamiseks murdepunktide vahel.45

Süntaks on peaaegu sama, mis vaikimisi positiivse veerise utiliidid, kuid lisatud on nenne nõutud suurust. Siin on näide klassist, mis on vastupidine .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Siin on näide Bootstrapi ruudustiku kohandamisest keskmisel ( md) murdepunktil ja sellest kõrgemal. Oleme suurendanud .colpolsterdust rakendusega .px-md-5ja seejärel aidanud sellele .mx-md-n5vastu olla vanemal .row.

Kohandatud veeru polsterdus

<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>