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>