Spazamentu

Bootstrap include una larga gamma di classi di utilità di scurità è di utilità per mudificà l'aspettu di un elementu.

Cumu funziona

Assignà responsive-friendly margino paddingvalori à un elementu o un sottumessu di i so lati cù classi di stenografia. Include supportu per e proprietà individuali, tutte e proprietà, è e proprietà verticali è horizontali. E classi sò custruiti da una mappa Sass predeterminata chì varieghja da .25remà 3rem.

Notazione

L'utilità di spaziatura chì s'applicanu à tutti i punti d'interruzzione, da xsà xl, ùn anu micca abbreviazione di punti d'interruzzione in elli. Questu hè perchè queste classi sò applicate da min-width: 0è in su, è cusì ùn sò micca ligati da una media query. I punti di breakpoint restanti, però, includenu un'abbreviazione di breakpoint.

I classi sò chjamati cù u formatu {property}{sides}-{size}per xsè {property}{sides}-{breakpoint}-{size}per sm, md, lg, è xl.

Induve a pruprietà hè unu di:

m- per e classi chì stabiliscenumargin
p- per e classi chì stabiliscenupadding

Induve i lati hè unu di:

t- per e classi chì stabiliscenu margin-topopadding-top
b- per e classi chì stabiliscenu margin-bottomopadding-bottom
l- per e classi chì stabiliscenu margin-leftopadding-left
r- per e classi chì stabiliscenu margin-rightopadding-right
x- per e classi chì stabiliscenu tramindui *-leftè*-right
y- per e classi chì stabiliscenu tramindui *-topè*-bottom
blank - per classi chì ponenu a margino paddingnantu à tutti i 4 lati di l'elementu

Induve a dimensione hè unu di:

0- per e classi chì eliminanu u margino paddingda mette in0
1- (per difettu) per e classi chì stabiliscenu margino paddingà$spacer * .25
2- (per difettu) per e classi chì stabiliscenu margino paddingà$spacer * .5
3- (per difettu) per e classi chì stabiliscenu margino paddingà$spacer
4- (per difettu) per e classi chì stabiliscenu margino paddingà$spacer * 1.5
5- (per difettu) per e classi chì stabiliscenu margino paddingà$spacer * 3
auto- per e classi chì ponenu l' marginauto

(Pudete aghjunghje più dimensioni aghjunghjendu entrate à a $spacersvariabile di mappa Sass.)

Esempii

Eccu alcuni esempi rapprisentanti di sti classi:

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

Centratura horizontale

Inoltre, Bootstrap include ancu una .mx-autoclassa per u centru horizontale di u cuntenutu di u nivellu di bloccu di larghezza fissa - vale à dì, cuntenutu chì hà display: blockè un widthset - mettendu i margini horizontali à auto.

Elementu centratu

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