Abstand

Bootstrap enthält eng breet Palette vu Shorthand reaktiounsfäeger Margin a Padding Utility Klassen fir d'Erscheinung vun engem Element z'änneren.

Wéi et funktionnéiert

Gitt reaktiounsfäeg marginoder paddingWäerter un en Element oder e Subset vu senge Säiten mat Shorthand Klassen. Ëmfaasst Ënnerstëtzung fir eenzel Eegeschafte, all Eegeschafte, a vertikal an horizontal Eegeschafte. Klassen sinn aus enger Standard Sass Kaart gebaut rangéiert vun .25rembis 3rem.

Notatioun

Abstands-Utilities, déi fir all Breakpoints gëllen, vun xsbis xl, hu keng Breakpoint Ofkierzung dran. Dëst ass well dës Klassen vun min-width: 0an erop applizéiert ginn, an dofir net vun enger Medienufro gebonnen sinn. Déi reschtlech Breakpunkter enthalen awer eng Breakpoint Ofkierzung.

D'Klassen gi mam Format {property}{sides}-{size}fir xsa {property}{sides}-{breakpoint}-{size}fir sm, md, lg, an xl.

Wou Immobilie ee vun:

• m- fir Klassen déi setzenmargin
• p- fir Klassen déi setzenpadding

Wou Säiten eng vun:

• t- fir Klassen déi setzen margin-topoderpadding-top
• b- fir Klassen déi setzen margin-bottomoderpadding-bottom
• l- fir Klassen déi setzen margin-leftoderpadding-left
• r- fir Klassen déi setzen margin-rightoderpadding-right
• x- fir Klassen déi souwuel *-lefta setzen*-right
• y- fir Klassen déi souwuel *-topa setzen*-bottom
• eidel - fir Klassen déi eng marginoder paddingop all 4 Säiten vum Element setzen

Wou Gréisst ass ee vun:

• 0- fir Klassen déi eliminéiert marginoder paddingandeems se se setzen0
• 1- (par défaut) fir Klassen déi den marginoder paddingop setzen$spacer * .25
• 2- (par défaut) fir Klassen déi den marginoder paddingop setzen$spacer * .5
• 3- (par défaut) fir Klassen déi den marginoder paddingop setzen$spacer
• 4- (par défaut) fir Klassen déi den marginoder paddingop setzen$spacer * 1.5
• 5- (par défaut) fir Klassen déi den marginoder paddingop setzen$spacer * 3
• auto- fir Klassen déi den marginAuto setzen

(Dir kënnt méi Gréissten addéieren andeems Dir Entréen an d' $spacersSass Kaartvariabel bäidréit.)

Beispiller

Hei sinn e puer representativ Beispiller vun dëse Klassen:

.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;
}

Horizontal zentréieren

Zousätzlech enthält Bootstrap och eng .mx-autoKlass fir den Inhalt vu fixe Breet-Blockniveau horizontal ze zentréieren - dat ass Inhalt deen display: blockan e widthSet huet - andeems d'horizontale Margen op setzen auto.

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