Source

Espaiat

Bootstrap inclou una àmplia gamma de classes d'utilitat de marge de resposta abreujada i farciment per modificar l'aparença d'un element.

Com funciona

Assigneu valors margino paddingvalors adaptatius a un element o a un subconjunt dels seus costats amb classes abreujades. Inclou suport per a propietats individuals, totes les propietats i propietats verticals i horitzontals. Les classes es creen a partir d'un mapa Sass predeterminat que va de .25rema 3rem.

Notació

Les utilitats d'espaiat que s'apliquen a tots els punts d'interrupció, de xsa xl, no tenen abreviatura de punt d'interrupció. Això es deu al fet que aquestes classes s'apliquen des min-width: 0i cap amunt i, per tant, no estan vinculades per una consulta de mitjans. Els punts d'interrupció restants, però, inclouen una abreviatura de punt d'interrupció.

Les classes s'anomenen amb el format {property}{sides}-{size}per a xsi {property}{sides}-{breakpoint}-{size}per a sm, md, lgi xl.

Quan la propietat és una de:

  • m- per a les classes establertesmargin
  • p- per a les classes establertespadding

On els costats és un de:

  • t- per a classes que fixen margin-topopadding-top
  • b- per a classes que fixen margin-bottomopadding-bottom
  • l- per a classes que fixen margin-leftopadding-left
  • r- per a classes que fixen margin-rightopadding-right
  • x- per a les classes que estableixen tant *-lefti*-right
  • y- per a les classes que estableixen tant *-topi*-bottom
  • en blanc: per a classes que estableixen a margino paddingals 4 costats de l'element

On la mida és una de:

  • 0- per a les classes que eliminen el margino paddingconfigurant-lo a0
  • 1- (per defecte) per a les classes que estableixen margino paddinga$spacer * .25
  • 2- (per defecte) per a les classes que estableixen margino paddinga$spacer * .5
  • 3- (per defecte) per a les classes que estableixen margino paddinga$spacer
  • 4- (per defecte) per a les classes que estableixen margino paddinga$spacer * 1.5
  • 5- (per defecte) per a les classes que estableixen margino paddinga$spacer * 3
  • auto- per a les classes que configuren com margina automàtic

(Podeu afegir més mides afegint entrades a la $spacersvariable del mapa Sass.)

Exemples

Aquests són alguns exemples representatius d'aquestes classes:

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

Centrat horitzontal

A més, Bootstrap també inclou una .mx-autoclasse per centrar horitzontalment contingut a nivell de bloc d'amplada fixa, és a dir, contingut que té display: blocki un widthconjunt, establint els marges horitzontals a auto.

Element centrat 
<div class="mx-auto" style="width: 200px;">
  Centered element
</div>