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.
Margen y relleno
Asigne valores responsive-friendly margin
o padding
a 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 .25rem
a 3rem
.
¿Utiliza el módulo de diseño de cuadrícula CSS? Considere usar la utilidad gap .
Notación
Las utilidades de espaciado que se aplican a todos los puntos de interrupción, de xs
a xxl
, no tienen abreviatura de punto de interrupción. Esto se debe a que esas clases se aplican desde min-width: 0
y 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 xs
y {property}{sides}-{breakpoint}-{size}
para sm
, md
, lg
, xl
y 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 establecenmargin-top
opadding-top
b
- para clases que establecenmargin-bottom
opadding-bottom
s
- (inicio) para clases que se configuranmargin-left
opadding-left
en LTR,margin-right
opadding-right
en RTLe
- (fin) para clases que se configuranmargin-right
opadding-right
en LTR,margin-left
opadding-left
en RTLx
- para las clases que establecen tanto*-left
y*-right
y
- para las clases que establecen tanto*-top
y*-bottom
- en blanco: para clases que establecen un
margin
opadding
en los 4 lados del elemento
Donde el tamaño es uno de:
0
- para las clases que eliminan elmargin
opadding
configurándolo en0
1
- (por defecto) para las clases que establecenmargin
opadding
en$spacer * .25
2
- (por defecto) para las clases que establecenmargin
opadding
en$spacer * .5
3
- (por defecto) para las clases que establecenmargin
opadding
en$spacer
4
- (por defecto) para las clases que establecenmargin
opadding
en$spacer * 1.5
5
- (por defecto) para las clases que establecenmargin
opadding
en$spacer * 3
auto
- para clases que configuran elmargin
auto
(Puede agregar más tamaños agregando entradas a la $spacers
variable 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-auto
clase para centrar horizontalmente contenido de nivel de bloque de ancho fijo, es decir, contenido que tiene display: block
y un width
conjunto, configurando los márgenes horizontales en auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
margen negativo
En CSS, margin
las propiedades pueden utilizar valores negativos ( padding
no 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 n
antes 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 gap
las 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: grid
contenedor). Las utilidades de Gap responden de forma predeterminada y se generan a través de nuestra API de utilidades, según el $spacers
mapa de Sass.
<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 $spacers
mapa ( 0
- 5
). No hay una .gap-auto
clase 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,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
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
),