Spaziatura
Bootstrap include un'ampia gamma di classi di utilità di riempimento e margini reattivi per abbreviazioni per modificare l'aspetto di un elemento.
Come funziona
Assegna valori margin
o padding
valori reattivi a un elemento o a un sottoinsieme dei suoi lati con classi abbreviate. Include il supporto per le singole proprietà, tutte le proprietà e le proprietà verticali e orizzontali. Le classi sono costruite da una mappa Sass predefinita che va da .25rem
a 3rem
.
Notazione
Le utilità di spaziatura che si applicano a tutti i punti di interruzione, da xs
a xl
, non contengono abbreviazioni di punti di interruzione. Questo perché quelle classi vengono applicate da min-width: 0
e verso l'alto e quindi non sono vincolate da una query multimediale. I restanti punti di interruzione, tuttavia, includono un'abbreviazione di punto di interruzione.
Le classi vengono denominate utilizzando il formato {property}{sides}-{size}
for xs
e {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
e xl
.
Dove la proprietà è una di:
m
- per le classi che impostanomargin
p
- per le classi che impostanopadding
Dove i lati è uno di:
t
- per le classi che impostanomargin-top
opadding-top
b
- per le classi che impostanomargin-bottom
opadding-bottom
l
- per le classi che impostanomargin-left
opadding-left
r
- per le classi che impostanomargin-right
opadding-right
x
- per classi che impostano entrambi*-left
e*-right
y
- per classi che impostano entrambi*-top
e*-bottom
- vuoto - per classi che impostano a
margin
opadding
su tutti e 4 i lati dell'elemento
Dove la dimensione è una di:
0
- per le classi che eliminanomargin
opadding
impostandolo su0
1
- (per impostazione predefinita) per le classi che impostanomargin
opadding
su$spacer * .25
2
- (per impostazione predefinita) per le classi che impostanomargin
opadding
su$spacer * .5
3
- (per impostazione predefinita) per le classi che impostanomargin
opadding
su$spacer
4
- (per impostazione predefinita) per le classi che impostanomargin
opadding
su$spacer * 1.5
5
- (per impostazione predefinita) per le classi che impostanomargin
opadding
su$spacer * 3
auto
- per le classi che impostanomargin
su auto
(Puoi aggiungere più dimensioni aggiungendo voci alla $spacers
variabile mappa Sass.)
Esempi
Ecco alcuni esempi rappresentativi di queste 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 orizzontale
Inoltre, Bootstrap include anche una .mx-auto
classe per centrare orizzontalmente il contenuto a livello di blocco a larghezza fissa, ovvero il contenuto che ha display: block
e un width
set, impostando i margini orizzontali su auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margine negativo
In CSS, margin
le proprietà possono utilizzare valori negativi ( padding
non possono). A partire dalla versione 4.2, abbiamo aggiunto utilità di margine negativo per ogni dimensione intera diversa da zero sopra elencata (ad esempio, 1
, 2
, 3
, 4
, 5
). Queste utilità sono ideali per personalizzare le grondaie delle colonne della griglia tra i punti di interruzione.
La sintassi è quasi la stessa delle utilità di margine positivo predefinite, ma con l'aggiunta di n
prima della dimensione richiesta. Ecco una classe di esempio che è l'opposto di .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Ecco un esempio di personalizzazione della griglia Bootstrap al punto di md
interruzione medio ( ) e oltre. Abbiamo aumentato il .col
padding con .px-md-5
e poi l'abbiamo contrastato con .mx-md-n5
sul 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>