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 margin
või väärtused. padding
Sisaldab üksikute atribuutide, kõigi atribuutide ning vertikaalsete ja horisontaalsete atribuutide tuge. Klassid on koostatud Sassi vaikekaardilt vahemikus .25rem
kuni 3rem
.
Märge
Kõigile murdepunktidele (alates xs
kuni xl
) kehtivatel vaheutiliitidel pole murdepunktide lühendit. Selle põhjuseks on asjaolu, et neid klasse rakendatakse alates min-width: 0
ja üles ning seega ei seo neid meediumipäring. Ülejäänud murdepunktid sisaldavad aga katkestuspunktide lühendit.
Klassid on nimetatud vormingus {property}{sides}-{size}
, , , xs
ja {property}{sides}-{breakpoint}-{size}
jaoks .sm
md
lg
xl
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 seavadmargin-top
võipadding-top
b
- klassidele, mis seavadmargin-bottom
võipadding-bottom
l
- klassidele, mis seavadmargin-left
võipadding-left
r
- klassidele, mis seavadmargin-right
võipadding-right
x
- klassidele, mis määravad nii*-left
ja*-right
y
- klassidele, mis määravad nii*-top
ja*-bottom
- tühi – klasside jaoks, mis määravad a
margin
võipadding
elemendi kõigile neljale küljele
Kui suurus on üks järgmistest:
0
- klassidele, mis kõrvaldavadmargin
võipadding
määrates selle0
1
- (vaikimisi) klasside jaoks, mis määravadmargin
võipadding
$spacer * .25
2
- (vaikimisi) klasside jaoks, mis määravadmargin
võipadding
$spacer * .5
3
- (vaikimisi) klasside jaoks, mis määravadmargin
võipadding
$spacer
4
- (vaikimisi) klasside jaoks, mis määravadmargin
võipadding
$spacer * 1.5
5
- (vaikimisi) klasside jaoks, mis määravadmargin
võipadding
$spacer * 3
auto
- klassidele, mis määravadmargin
automaatseks
(Saate lisada rohkem suurusi, lisades kirjeid $spacers
Sassi 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-auto
klassi fikseeritud laiusega plokitaseme sisu, st sisu, millel on display: block
ja width
komplekt, horisontaalseks tsentreerimiseks, määrates horisontaalsed veerised väärtusele auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negatiivne marginaal
CSS-is võivad margin
atribuudid kasutada negatiivseid väärtusi ( padding
ei 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.4
5
Süntaks on peaaegu sama, mis vaikimisi positiivse veerise utiliidid, kuid lisatud on n
enne 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 .col
polsterdust rakendusega .px-md-5
ja seejärel aidanud sellele .mx-md-n5
vastu olla vanemal .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>