Spazamentu
Bootstrap include una larga gamma di classi di utilità di scurità è di utilità per mudificà l'aspettu di un elementu.
Cumu travaglia
Assignà responsive-friendly margin
o padding
valori à un elementu o un sottumessu di i so lati cù classi di shorthand. Include supportu per e proprietà individuali, tutte e proprietà, è e proprietà verticali è horizontali. E classi sò custruite 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 di scontru. 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.
E 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ì stabiliscenumargin-top
opadding-top
b
- per e classi chì stabiliscenumargin-bottom
opadding-bottom
l
- per e classi chì stabiliscenumargin-left
opadding-left
r
- per e classi chì stabiliscenumargin-right
opadding-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
margin
opadding
nantu à tutti i 4 lati di l'elementu
Induve a dimensione hè unu di:
0
- per e classi chì eliminanu umargin
opadding
da mette in0
1
- (per difettu) per e classi chì stabiliscenumargin
opadding
à$spacer * .25
2
- (per difettu) per e classi chì stabiliscenumargin
opadding
à$spacer * .5
3
- (per difettu) per e classi chì stabiliscenumargin
opadding
à$spacer
4
- (per difettu) per e classi chì stabiliscenumargin
opadding
à$spacer * 1.5
5
- (per difettu) per e classi chì stabiliscenumargin
opadding
à$spacer * 3
auto
- per e classi chì ponenu l'margin
auto
(Pudete aghjunghje più dimensioni aghjunghjendu entrate à a $spacers
variabile 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-auto
classa per u centru horizontale di u cuntenutu di u nivellu di bloccu di larghezza fissa - vale à dì, cuntenutu chì hà display: block
è un width
set - mettendu i margini horizontali à auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margine negativu
In CSS, margin
e pruprietà 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 in i punti di rottura.
A sintassi hè quasi listessa cum'è l'utilità di margine pusitivu predeterminatu, ma cù l'aghjunzione di n
prima 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 md
puntu di breakpoint mediu ( ) è sopra. Avemu aumentatu l' .col
imbottitura cù .px-md-5
è dopu contru à quellu cù .mx-md-n5
u genitore .row
.
<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>