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>

Margine negativo

In CSS, marginle proprietà possono utilizzare valori negativi ( paddingnon 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 nprima 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 mdinterruzione medio ( ) e oltre. Abbiamo aumentato il .colpadding con .px-md-5e poi l'abbiamo contrastato con .mx-md-n5sul genitore .row.

Imbottitura delle colonne personalizzata

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