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

Cualificación

As utilidades de espazamento que se aplican a todos os puntos de interrupción, de xsa xl, 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, lge 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 establecen margin-topoupadding-top
b- para as clases que establecen margin-bottomoupadding-bottom
l- para as clases que establecen margin-leftoupadding-left
r- para as clases que establecen margin-rightoupadding-right
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;
}

.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-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). 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 nantes 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 mdpunto de interrupción medio ( ) e superior. Aumentamos o .colrecheo con .px-md-5e despois contrarrestamos iso con .mx-md-n5no pai .row.

Recheo de columnas personalizado

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