Spazamentu

Bootstrap include una larga gamma di classi di utilità di margine di risposta, padding è gap per mudificà l'aspettu di un elementu.

In sta pagina

Margine è padding

Assignà responsive-friendly margino paddingvalori à un elementu o un sottumessu di i so lati cù classi di stenografia. Include supportu per e proprietà individuali, tutte e proprietà, è e proprietà verticali è horizontali. E classi sò custruiti da una mappa Sass predeterminata chì varieghja da .25remà 3rem.

Utilizà u modulu di layout CSS Grid? Cunsiderate aduprà l'utilità gap invece.

Notazione

L'utilità di spaziatura chì s'applicanu à tutti i punti d'interruzzione, da xsà xxl, ùn anu micca abbreviazione di punti d'interruzzione in elli. 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.

I classi sò chjamati cù u formatu {property}{sides}-{size}per xsè {property}{sides}-{breakpoint}-{size}per sm, md, lg, xlè xxl.

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ì stabiliscenu margin-topopadding-top
b- per e classi chì stabiliscenu margin-bottomopadding-bottom
s- (iniziu) per e classi chì stabiliscenu margin-lefto padding-leftin LTR, margin-righto padding-rightin RTL
e- (fine) per e classi chì stabiliscenu margin-righto padding-rightin LTR, margin-lefto padding-leftin RTL
x- per e classi chì stabiliscenu tramindui *-leftè*-right
y- per e classi chì stabiliscenu tramindui *-topè*-bottom
blank - per classi chì ponenu a margino paddingnantu à tutti i 4 lati di l'elementu

Induve a dimensione hè unu di:

0- per e classi chì eliminanu u margino paddingda mette in0
1- (per difettu) per e classi chì stabiliscenu margino paddingà$spacer * .25
2- (per difettu) per e classi chì stabiliscenu margino paddingà$spacer * .5
3- (per difettu) per e classi chì stabiliscenu margino paddingà$spacer
4- (per difettu) per e classi chì stabiliscenu margino paddingà$spacer * 1.5
5- (per difettu) per e classi chì stabiliscenu margino paddingà$spacer * 3
auto- per e classi chì ponenu l' marginauto

(Pudete aghjunghje più dimensioni aghjunghjendu entrate à a $spacersvariabile di mappa Sass.)

Esempii

Eccu alcuni esempi rapprisentanti di sti 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 horizontale

Inoltre, Bootstrap include ancu una .mx-autoclassa per u centru horizontale di u cuntenutu di u nivellu di bloccu di larghezza fissa - vale à dì, cuntenutu chì hà display: blockè un widthset - mettendu i margini horizontali à auto.

Elementu centratu

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

Margine negativu

In CSS, margine pruprietà ponu utilizà valori negativi ( paddingùn pò micca). Questi marghjini negativi sò disattivati per difettu , ma ponu esse attivati in Sass per paràmetri $enable-negative-margins: true.

A sintassi hè quasi listessa cum'è l'utilità di margine pusitivu predeterminatu, ma cù l'aghjunzione di nprima di a dimensione dumandata. Eccu un esempiu di classi chì hè u cuntrariu di .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Gap

Quandu si usa display: grid, pudete aduprà gaputilità nantu à u cuntainer di griglia parent. Questu pò salvà di avè da aghjunghje utilità di marghjini à l'articuli di griglia individuali (figlioli di un display: gridcuntinuu). L'utilità Gap sò responsive per difettu, è sò generate via a nostra API d'utilità, basatu annantu à a $spacersmappa Sass.

Elementu di griglia 1

Elementu di a griglia 2

Elementu di a griglia 3

html

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

U supportu include opzioni responsive per tutti i punti di rottura di a griglia di Bootstrap, è ancu sei dimensioni da a $spacersmappa ( 0- 5). Ùn ci hè micca .gap-autouna classe di utilità postu chì hè effettivamente uguale à .gap-0.

Sass

Maps

L'utilità di spaziazione sò dichjarate via Sass map è poi generate cù a nostra API d'utilità.

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

Utilities API

L'utilità di spaziatura sò dichjarate in a nostra API d'utilità in scss/_utilities.scss. Amparate cumu utilizà l'API utilities.

    "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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),