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.

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