Espazamento
Bootstrap inclúe unha ampla gama de clases de utilidade de recheo e marxe de resposta abreviada para modificar a aparencia dun elemento.
Cómo funciona
Asignar valores de adaptación margin
ou padding
valores 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 .25rem
a 3rem
.
Cualificación
As utilidades de espazamento que se aplican a todos os puntos de interrupción, de xs
a xl
, non teñen ningunha abreviatura de punto de interrupción. Isto débese a que esas clases aplícanse desde min-width: 0
e 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 xs
e {property}{sides}-{breakpoint}-{size}
para sm
, md
, lg
e xl
.
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 establecenmargin-top
oupadding-top
b
- para as clases que establecenmargin-bottom
oupadding-bottom
l
- para as clases que establecenmargin-left
oupadding-left
r
- para as clases que establecenmargin-right
oupadding-right
x
- para as clases que establecen tanto*-left
e*-right
y
- para as clases que establecen tanto*-top
e*-bottom
- en branco: para as clases que establecen a
margin
oupadding
nos 4 lados do elemento
Onde o tamaño é un de:
0
- para as clases que eliminan omargin
oupadding
axustándoo a0
1
- (por defecto) para as clases que establecen omargin
oupadding
para$spacer * .25
2
- (por defecto) para as clases que establecen omargin
oupadding
para$spacer * .5
3
- (por defecto) para as clases que establecen omargin
oupadding
para$spacer
4
- (por defecto) para as clases que establecen omargin
oupadding
para$spacer * 1.5
5
- (por defecto) para as clases que establecen omargin
oupadding
para$spacer * 3
auto
- para as clases que configuranmargin
como automático
(Podes engadir máis tamaños engadindo entradas á $spacers
variable do mapa Sass).
Exemplos
Aquí tes algúns exemplos representativos destas 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
Ademais, Bootstrap tamén inclúe unha .mx-auto
clase para centrar horizontalmente o contido a nivel de bloque de ancho fixo, é dicir, contido que ten display: block
e un width
conxunto, configurando as marxes horizontais en auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Marxe negativa
En CSS, margin
as propiedades poden utilizar valores negativos ( padding
non pode). A partir da 4.2, engadimos utilidades de marxe negativa para cada tamaño de número enteiro distinto de cero indicado anteriormente (por exemplo, 1
, 2
, 3
, 4
, 5
). Estas utilidades son ideais para personalizar canaletas de columnas de reixa en puntos de interrupción.
A sintaxe é case a mesma que as utilidades de marxe positiva predeterminadas, pero coa adición de n
antes do tamaño solicitado. Aquí tes un exemplo de clase que é o contrario de .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Aquí tes un exemplo de personalización da grade Bootstrap no md
punto de interrupción medio ( ) e superior. Aumentamos o .col
recheo con .px-md-5
e despois contrarrestamos iso con .mx-md-n5
no pai .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>