Espaciado
Bootstrap incluye una amplia gama de clases de utilidad de margen y relleno de respuesta abreviada para modificar la apariencia de un elemento.
Cómo funciona
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
.
Notación
Las utilidades de espaciado que se aplican a todos los puntos de interrupción, de xs
a xl
, 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 utilizando el formato {property}{sides}-{size}
for xs
y {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
y xl
.
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
l
- para clases que establecenmargin-left
opadding-left
r
- para clases que establecenmargin-right
opadding-right
x
- 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;
}
.ml-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). A partir de la versión 4.2, agregamos utilidades de margen negativo para cada tamaño de entero distinto de cero enumerado anteriormente (p. ej., 1
, 2
, 3
, 4
, 5
). Estas utilidades son ideales para personalizar los canalones de las columnas de rejilla en los puntos de interrupción.
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;
}
Este es un ejemplo de cómo personalizar la cuadrícula de Bootstrap en el md
punto de interrupción medio ( ) y superior. Hemos aumentado el .col
relleno con .px-md-5
y luego lo hemos contrarrestado con .mx-md-n5
el padre .row
.
<div class="row mx-md-n5">
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>