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 margino paddingvalori 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 .25rema 3rem.

Notazione

Le utilità di spaziatura che si applicano a tutti i punti di interruzione, da xsa xl, non contengono abbreviazioni di punti di interruzione. Questo perché quelle classi vengono applicate da min-width: 0e 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 xse {property}{sides}-{breakpoint}-{size}for sm, md, lge 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 impostano margin-topopadding-top
b- per le classi che impostano margin-bottomopadding-bottom
l- per le classi che impostano margin-leftopadding-left
r- per le classi che impostano margin-rightopadding-right
x- per classi che impostano entrambi *-lefte*-right
y- per classi che impostano entrambi *-tope*-bottom
vuoto - per classi che impostano a margino paddingsu tutti e 4 i lati dell'elemento

Dove la dimensione è una di:

0- per le classi che eliminano margino paddingimpostandolo su0
1- (per impostazione predefinita) per le classi che impostano margino paddingsu$spacer * .25
2- (per impostazione predefinita) per le classi che impostano margino paddingsu$spacer * .5
3- (per impostazione predefinita) per le classi che impostano margino paddingsu$spacer
4- (per impostazione predefinita) per le classi che impostano margino paddingsu$spacer * 1.5
5- (per impostazione predefinita) per le classi che impostano margino paddingsu$spacer * 3
auto- per le classi che impostano marginsu auto

(Puoi aggiungere più dimensioni aggiungendo voci alla $spacersvariabile 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-autoclasse per centrare orizzontalmente il contenuto a livello di blocco a larghezza fissa, ovvero il contenuto che ha display: blocke un widthset, impostando i margini orizzontali su auto.

Elemento centrato

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