Espaciado

Bootstrap incluye una amplia gama de clases de utilidad de margen, relleno y espacio de respuesta abreviadas para modificar la apariencia de un elemento.

En esta página

Margen y relleno

Asigne valores responsive-friendly margino paddinga un elemento o un subconjunto de sus lados con clases abreviadas. Incluye soporte para propiedades individuales, todas las propiedades y propiedades verticales y horizontales. Las clases se crean a partir de un mapa Sass predeterminado que va de .25rema 3rem.

¿Utiliza el módulo de diseño de cuadrícula CSS? Considere usar la utilidad gap en su lugar.

Notación

Las utilidades de espaciado que se aplican a todos los puntos de interrupción, de xsa xxl, no tienen abreviatura de punto de interrupción. Esto se debe a que esas clases se aplican desde min-width: 0y hacia arriba y, por lo tanto, no están vinculadas a una consulta de medios. Sin embargo, los puntos de interrupción restantes sí incluyen una abreviatura de punto de interrupción.

Las clases se nombran usando el formato {property}{sides}-{size}para xsy {property}{sides}-{breakpoint}-{size}para sm, md, lg, xly xxl.

Donde la propiedad es una de:

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

Donde lados es uno de:

t- para clases que establecen margin-topopadding-top
b- para clases que establecen margin-bottomopadding-bottom
s- (inicio) para clases que se configuran margin-lefto padding-leften LTR, margin-righto padding-righten RTL
e- (fin) para clases que se configuran margin-righto padding-righten LTR, margin-lefto padding-leften RTL
x- para las clases que establecen tanto *-lefty*-right
y- para las clases que establecen tanto *-topy*-bottom
en blanco: para clases que establecen un margino paddingen los 4 lados del elemento

Donde el tamaño es uno de:

0- para las clases que eliminan el margino paddingconfigurándolo en0
1- (por defecto) para las clases que establecen margino paddingen$spacer * .25
2- (por defecto) para las clases que establecen margino paddingen$spacer * .5
3- (por defecto) para las clases que establecen margino paddingen$spacer
4- (por defecto) para las clases que establecen margino paddingen$spacer * 1.5
5- (por defecto) para las clases que establecen margino paddingen$spacer * 3
auto- para clases que configuran el marginauto

(Puede agregar más tamaños agregando entradas a la $spacersvariable del mapa Sass).

Ejemplos

Estos son algunos ejemplos representativos de estas 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

Además, Bootstrap también incluye una .mx-autoclase para centrar horizontalmente contenido de nivel de bloque de ancho fijo, es decir, contenido que tiene display: blocky un widthconjunto, configurando los márgenes horizontales en auto.

elemento centrado

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

margen negativo

En CSS, marginlas propiedades pueden utilizar valores negativos ( paddingno se puede). Estos márgenes negativos están deshabilitados de forma predeterminada , pero se pueden habilitar en Sass configurando $enable-negative-margins: true.

La sintaxis es casi la misma que las utilidades de margen positivo predeterminadas, pero con la adición de nantes del tamaño solicitado. Aquí hay una clase de ejemplo que es lo opuesto a .mt-1:

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

Brecha

Al usar display: grid, puede hacer uso de gaplas utilidades en el contenedor de cuadrícula principal. Esto puede evitar tener que agregar utilidades de margen a elementos de cuadrícula individuales (hijos de un display: gridcontenedor). Las utilidades de Gap responden de forma predeterminada y se generan a través de nuestra API de utilidades, según el $spacersmapa de Sass.

Elemento de cuadrícula 1

Elemento de cuadrícula 2

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

El soporte incluye opciones de respuesta para todos los puntos de interrupción de la cuadrícula de Bootstrap, así como seis tamaños del $spacersmapa ( 0- 5). No hay una .gap-autoclase de utilidad, ya que es efectivamente lo mismo que .gap-0.

Hablar con descaro a

mapas

Las utilidades de espaciado se declaran a través del mapa Sass y luego se generan con nuestra 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

Las utilidades de espaciado se declaran en nuestra API de utilidades en formato scss/_utilities.scss. Aprenda a usar la 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
    ),