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>

Margine negativu

In CSS, marginproprietà ponu utilizà valori negativi ( paddingùn pò micca). A partire da 4.2, avemu aghjustatu utilità di margine negativu per ogni dimensione intera non zero listata sopra (per esempiu, 1, 2, 3, 4, 5). Queste utilità sò ideali per persunalizà i canali di colonna di griglia attraversu i punti di rottura.

A sintassi hè guasi listessa cum'è l'utilità di margine pusitivu predeterminatu, ma cù l'aghjunzione di nprima di a dimensione dumandata. Eccu un esempiu di classi chì hè u cuntrariu di .mt-1:

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

Eccu un esempiu di persunalizà a griglia Bootstrap à u mdpuntu di breakpoint mediu ( ) è sopra. Avemu aumentatu l' .colimbottitura cù .px-md-5è dopu contru à quellu cù .mx-md-n5u genitore .row.

Imbottitura di colonna persunalizata

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