Avstand

Bootstrap inkluderer et bredt spekter av responsive margin- og polstringsklasser for å endre et elements utseende.

Hvordan det fungerer

Tilordne responsvennlige margineller paddingverdier 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 .25remtil 3rem.

Notasjon

Avstandsverktøy som gjelder for alle bruddpunkter, fra xstil xl, har ingen bruddpunktforkortelse i seg. Dette er fordi disse klassene brukes fra min-width: 0og 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 xsog {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 setter margin-topellerpadding-top
b- for klasser som setter margin-bottomellerpadding-bottom
l- for klasser som setter margin-leftellerpadding-left
r- for klasser som setter margin-rightellerpadding-right
x- for klasser som setter både *-leftog*-right
y- for klasser som setter både *-topog*-bottom
blank - for klasser som setter a margineller paddingpå alle 4 sider av elementet

Hvor størrelsen er en av:

0- for klasser som eliminerer margineller paddingved å sette den til0
1- (som standard) for klasser som setter margineller paddingtil$spacer * .25
2- (som standard) for klasser som setter margineller paddingtil$spacer * .5
3- (som standard) for klasser som setter margineller paddingtil$spacer
4- (som standard) for klasser som setter margineller paddingtil$spacer * 1.5
5- (som standard) for klasser som setter margineller paddingtil$spacer * 3
auto- for klasser som setter margintil auto

(Du kan legge til flere størrelser ved å legge til oppføringer i $spacersSass-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-autoklasse for horisontalt sentrering av blokknivåinnhold med fast bredde – det vil si innhold som har display: blockog et widthsett – ved å sette de horisontale margene til auto.

Sentrert element

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

Negativ margin

I CSS kan marginegenskaper bruke negative verdier ( paddingkan 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 nfø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 .colpolstringen med .px-md-5og så motvirket det med .mx-md-n5på forelderen .row.

Egendefinert søylepolstring

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