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.

Zentréiert Element

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

Negativ Margin

An CSS kënnen marginEegeschafte negativ Wäerter benotzen ( paddingkann net). Zënter 4.2 hu mir negativ Margin Utilities bäigefüügt fir all net-null ganz Zuel uewe genannt (zB, 1, 2, 3, 4, 5). Dës Utilitys sinn ideal fir d'Gitterkolonnerennen iwwer Breakpunkter ze personaliséieren.

D'Syntax ass bal d'selwecht wéi d'Standard, positiv Margin Utilities, awer mat der Zousatz vun nder ugefrote Gréisst. Hei ass eng Beispill Klass déi de Géigendeel ass .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Hei ass e Beispill fir d'Bootstrap Gitter an de mëttleren ( md) Breakpunkt an uewen ze personaliséieren. Mir hunn de .colPolsterung erhéicht mat .px-md-5an dann entgéintgesat datt mat .mx-md-n5op den Elterendeel .row.

Benotzerdefinéiert Kolonn padding

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