in English

Espazamento

Bootstrap inclúe unha ampla gama de clases de utilidade de marxe de resposta abreviada, recheo e oco para modificar a aparencia dun elemento.

Nesta páxina

Marxe e recheo

Asignar valores de adaptación marginou paddingvalores a un elemento ou a un subconxunto dos seus lados con clases abreviadas. Inclúe compatibilidade con propiedades individuais, todas as propiedades e propiedades verticais e horizontais. As clases constrúense a partir dun mapa Sass predeterminado que vai de .25rema 3rem.

Usa o módulo de deseño de cuadrícula CSS? Considere usar a utilidade gap no seu lugar.

Cualificación

As utilidades de espazamento que se aplican a todos os puntos de interrupción, de xsa xxl, non teñen ningunha abreviatura de punto de interrupción. Isto débese a que esas clases aplícanse desde min-width: 0e cara arriba e, polo tanto, non están vinculadas a unha consulta de medios. Os puntos de interrupción restantes, con todo, inclúen unha abreviatura de punto de interrupción.

As clases son nomeadas co formato {property}{sides}-{size}para xse {property}{sides}-{breakpoint}-{size}para sm, md, lg, xle xxl.

Onde a propiedade é un dos seguintes:

m- para as clases que establecenmargin
p- para as clases que establecenpadding

Onde os lados é un de:

t- para as clases que establecen margin-topoupadding-top
b- para as clases que establecen margin-bottomoupadding-bottom
s- (inicio) para as clases que se establecen margin-leftou padding-leften LTR, margin-rightou padding-righten RTL
e- (fin) para as clases que establecen margin-rightou padding-righten LTR, margin-leftou padding-leften RTL
x- para as clases que establecen tanto *-lefte*-right
y- para as clases que establecen tanto *-tope*-bottom
en branco: para as clases que establecen a marginou paddingnos 4 lados do elemento

Onde o tamaño é un de:

0- para as clases que eliminan o marginou paddingaxustándoo a0
1- (por defecto) para as clases que establecen o marginou paddingpara$spacer * .25
2- (por defecto) para as clases que establecen o marginou paddingpara$spacer * .5
3- (por defecto) para as clases que establecen o marginou paddingpara$spacer
4- (por defecto) para as clases que establecen o marginou paddingpara$spacer * 1.5
5- (por defecto) para as clases que establecen o marginou paddingpara$spacer * 3
auto- para as clases que configuran margincomo automático

(Podes engadir máis tamaños engadindo entradas á $spacersvariable do mapa Sass).

Exemplos

Aquí tes algúns exemplos representativos destas clases:

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

Centrado horizontal

Ademais, Bootstrap tamén inclúe unha .mx-autoclase para centrar horizontalmente o contido a nivel de bloque de ancho fixo, é dicir, contido que ten display: blocke un widthconxunto, configurando as marxes horizontais en auto.

Elemento centrado

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

Marxe negativa

En CSS, marginas propiedades poden utilizar valores negativos ( paddingnon pode). Estas marxes negativas están desactivadas por defecto , pero pódense activar en Sass configurando $enable-negative-margins: true.

A sintaxe é case a mesma que as utilidades de marxe positiva predeterminadas, pero coa adición de nantes do tamaño solicitado. Aquí tes un exemplo de clase que é o contrario de .mt-1:

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

Gap

Ao usar display: grid, podes facer uso das gaputilidades do contedor da rede principal. Isto pode aforrar ao ter que engadir utilidades de marxe aos elementos individuais da rede (fillos dun display: gridcontedor). As utilidades de Gap responden por defecto e xéranse a través da nosa API de utilidades, baseada no $spacersmapa Sass.

Elemento da cuadrícula 1

Elemento da cuadrícula 2

Elemento da cuadrícula 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>

A compatibilidade inclúe opcións de resposta para todos os puntos de interrupción da grella de Bootstrap, así como seis tamaños do $spacersmapa ( 0– 5). Non hai .gap-autoclase de utilidade xa que é efectivamente a mesma que .gap-0.

Sass

Mapas

As utilidades de espazamento decláranse a través do mapa Sass e despois xéranse coa nosa API de utilidades.

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

API de utilidades

As utilidades de espazamento decláranse na nosa API de utilidades en scss/_utilities.scss. Aprende a usar a API de utilidades.

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