Spaziatura

Bootstrap include un'ampia gamma di classi di utilità abbreviate responsive margin, padding e gap per modificare l'aspetto di un elemento.

Su questa pagina

Margine e riempimento

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.

Utilizzi il modulo di layout della griglia CSS? Prendi in considerazione l'utilizzo dell'utilità gap .

Notazione

Le utilità di spaziatura che si applicano a tutti i punti di interruzione, da xsa xxl, 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, lg, xle xxl.

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
s- (inizio) per classi che impostano margin-lefto padding-leftin LTR, margin-righto padding-rightin RTL
e- (fine) per classi che impostano margin-righto padding-rightin LTR, margin-lefto padding-leftin RTL
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;
}

.ms-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). Questi margini negativi sono disabilitati per impostazione predefinita , ma possono essere abilitati in Sass impostando $enable-negative-margins: true.

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

Spacco

Quando si utilizza display: grid, è possibile utilizzare le gaputilità nel contenitore della griglia padre. Ciò può evitare di dover aggiungere utilità di margine a singoli elementi della griglia (figli di un display: gridcontenitore). Le utilità Gap sono reattive per impostazione predefinita e vengono generate tramite la nostra API di utilità, basata sulla $spacersmappa Sass.

Elemento della griglia 1

Elemento della griglia 2

Elemento della griglia 3

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Il supporto include opzioni reattive per tutti i punti di interruzione della griglia di Bootstrap, oltre a sei dimensioni dalla $spacersmappa ( 0– 5). Non esiste una .gap-autoclasse di utilità in quanto è effettivamente la stessa di .gap-0.

Sass

Mappe

Le utilità di spaziatura vengono dichiarate tramite la mappa Sass e quindi generate con la nostra API di utilità.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

API di utilità

Le utilità di spaziatura sono dichiarate nella nostra API di utilità in scss/_utilities.scss. Scopri come utilizzare l'API delle utilità.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),