Espaiat

Bootstrap inclou una àmplia gamma de classes d'utilitat de marge, farciment i buit sensibles per modificar l'aparença d'un element.

En aquesta pàgina

Marge i farciment

Assigneu valors margino paddingvalors adaptatius a un element o a un subconjunt dels seus costats amb classes abreujades. Inclou suport per a propietats individuals, totes les propietats i propietats verticals i horitzontals. Les classes es creen a partir d'un mapa Sass predeterminat que va de .25rema 3rem.

Utilitzeu el mòdul de disseny de quadrícula CSS? Penseu en utilitzar la utilitat gap .

Notació

Les utilitats d'espaiat que s'apliquen a tots els punts d'interrupció, de xsa xxl, no tenen abreviatura de punt d'interrupció. Això es deu al fet que aquestes classes s'apliquen des min-width: 0i cap amunt i, per tant, no estan vinculades per una consulta de mitjans. Els punts d'interrupció restants, però, inclouen una abreviatura de punt d'interrupció.

Les classes s'anomenen amb el format {property}{sides}-{size}per xsi {property}{sides}-{breakpoint}-{size}per a sm, md, lg, xli xxl.

Quan la propietat és una de:

m- per a les classes establertesmargin
p- per a les classes establertespadding

On els costats és un de:

t- per a classes que fixen margin-topopadding-top
b- per a classes que fixen margin-bottomopadding-bottom
s- (inici) per a classes que s'estableixen margin-lefto padding-leften LTR, margin-righto padding-righten RTL
e- (final) per a classes que estableixen margin-righto padding-righten LTR, margin-lefto padding-leften RTL
x- per a les classes que estableixen tant *-lefti*-right
y- per a les classes que estableixen tant *-topi*-bottom
en blanc: per a classes que estableixen a margino paddingals 4 costats de l'element

On la mida és una de:

0- per a les classes que eliminen el margino paddingconfigurant-lo a0
1- (per defecte) per a les classes que estableixen margino paddinga$spacer * .25
2- (per defecte) per a les classes que estableixen margino paddinga$spacer * .5
3- (per defecte) per a les classes que estableixen margino paddinga$spacer
4- (per defecte) per a les classes que estableixen margino paddinga$spacer * 1.5
5- (per defecte) per a les classes que estableixen margino paddinga$spacer * 3
auto- per a les classes que configuren com margina automàtic

(Podeu afegir més mides afegint entrades a la $spacersvariable del mapa Sass.)

Exemples

Aquests són alguns exemples representatius d'aquestes classes:

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

Centrat horitzontal

A més, Bootstrap també inclou una .mx-autoclasse per centrar horitzontalment contingut a nivell de bloc d'amplada fixa, és a dir, contingut que té display: blocki un widthconjunt, establint els marges horitzontals a auto.

Element centrat

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

Marge negatiu

En CSS, marginles propietats poden utilitzar valors negatius ( paddingno pot). Aquests marges negatius estan desactivats per defecte , però es poden activar a Sass mitjançant la configuració $enable-negative-margins: true.

La sintaxi és gairebé la mateixa que les utilitats de marge positiu per defecte, però amb l'addició de nabans de la mida sol·licitada. Aquí teniu un exemple de classe que és el contrari de .mt-1:

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

Escletxa

Quan utilitzeu display: grid, podeu fer ús de gaples utilitats del contenidor de la xarxa principal. Això pot estalviar haver d'afegir utilitats de marge a elements individuals de la xarxa (fills d'un display: gridcontenidor). Les utilitats Gap responen de manera predeterminada i es generen mitjançant la nostra API d'utilitats, basada en el $spacersmapa Sass.

Element de quadrícula 1

Element de quadrícula 2

Element de quadrícula 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>

El suport inclou opcions de resposta per a tots els punts d'interrupció de la graella de Bootstrap, així com sis mides del $spacersmapa ( 0- 5). No hi ha cap .gap-autoclasse d'utilitat, ja que efectivament és la mateixa que .gap-0.

Sass

Mapes

Les utilitats d'espaiat es declaren mitjançant el mapa Sass i després es generen amb la nostra API d'utilitats.

$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);

Utilitats API

Les utilitats d'espaiat es declaren a la nostra API d'utilitats en scss/_utilities.scss. Apreneu a utilitzar l'API d'utilitats.

    "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
    ),