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>

Marge negatiu

En CSS, marginles propietats poden utilitzar valors negatius ( paddingno pot). A partir de la 4.2, hem afegit utilitats de marge negatiu per a cada mida entera diferent de zero indicada anteriorment (p. ex., 1, 2, 3, 4, 5). Aquestes utilitats són ideals per personalitzar canalons de columnes de quadrícula a través dels punts d'interrupció.

La sintaxi és gairebé la mateixa que les utilitats de marge positiu per defecte, però amb l'addició de nabans de la mida sol·licitada. Aquí teniu un exemple de classe que és el contrari de .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Aquí teniu un exemple de personalització de la quadrícula Bootstrap al punt d' mdinterrupció mitjà ( ) i superior. Hem augmentat el .colfarciment amb .px-md-5i després ho hem contrarestat amb .mx-md-n5el pare .row.

Encoixinat de columnes personalitzat

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