Avstand
Bootstrap inkluderer et bredt spekter av responsive margin- og polstringsklasser for å endre et elements utseende.
Hvordan det fungerer
Tilordne responsvennlige margin
eller padding
verdier til et element eller en undergruppe av dets sider med stenografiklasser. Inkluderer støtte for individuelle egenskaper, alle egenskaper og vertikale og horisontale egenskaper. Klassene bygges fra et standard Sass-kart som strekker seg fra .25rem
til 3rem
.
Notasjon
Avstandsverktøy som gjelder for alle bruddpunkter, fra xs
til xl
, har ingen bruddpunktforkortelse i seg. Dette er fordi disse klassene brukes fra min-width: 0
og oppover, og dermed ikke er bundet av en mediespørring. De resterende bruddpunktene inkluderer imidlertid en bruddpunktforkortelse.
Klassene er navngitt med formatet {property}{sides}-{size}
for xs
og {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, og xl
.
Hvor eiendom er en av:
m
- for klasser som settermargin
p
- for klasser som setterpadding
Hvor sider er en av:
t
- for klasser som settermargin-top
ellerpadding-top
b
- for klasser som settermargin-bottom
ellerpadding-bottom
l
- for klasser som settermargin-left
ellerpadding-left
r
- for klasser som settermargin-right
ellerpadding-right
x
- for klasser som setter både*-left
og*-right
y
- for klasser som setter både*-top
og*-bottom
- blank - for klasser som setter a
margin
ellerpadding
på alle 4 sider av elementet
Hvor størrelsen er en av:
0
- for klasser som eliminerermargin
ellerpadding
ved å sette den til0
1
- (som standard) for klasser som settermargin
ellerpadding
til$spacer * .25
2
- (som standard) for klasser som settermargin
ellerpadding
til$spacer * .5
3
- (som standard) for klasser som settermargin
ellerpadding
til$spacer
4
- (som standard) for klasser som settermargin
ellerpadding
til$spacer * 1.5
5
- (som standard) for klasser som settermargin
ellerpadding
til$spacer * 3
auto
- for klasser som settermargin
til auto
(Du kan legge til flere størrelser ved å legge til oppføringer i $spacers
Sass-kartvariabelen.)
Eksempler
Her er noen representative eksempler på disse klassene:
.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;
}
Horisontal sentrering
I tillegg inkluderer Bootstrap også en .mx-auto
klasse for horisontalt sentrering av blokknivåinnhold med fast bredde – det vil si innhold som har display: block
og et width
sett – ved å sette de horisontale margene til auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negativ margin
I CSS kan margin
egenskaper bruke negative verdier ( padding
kan ikke). Fra og med 4.2 har vi lagt til verktøy for negativ margin for hver heltallsstørrelse som ikke er null (f.eks. 1
, 2
, 3
, 4
, 5
). Disse verktøyene er ideelle for å tilpasse rutenettsøylerenner på tvers av bruddpunkter.
Syntaksen er nesten den samme som standard, positiv marginverktøy, men med tillegg av n
før den forespurte størrelsen. Her er en eksempelklasse som er det motsatte av .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Her er et eksempel på å tilpasse Bootstrap-rutenettet ved middels ( md
) bruddpunkt og høyere. Vi har økt .col
polstringen med .px-md-5
og så motvirket det med .mx-md-n5
på forelderen .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>