Espaciamiento

Bootstrap huk hatun llimp'i taquigrafía kutichiq margen chaymanta relleno yanapakuy clasekuna huk elemento rikchayninta tikranapaq yapan.

Imayna llamkan

Huk elementoman utaq huk subconjunto de sus lados kaqman clases de taquigrafía kaqwan kutichiy-amigo marginutaq chanikunata churay. paddingSapa propiedades kaqpaq, tukuy propiedades kaqpaq, chaymanta sayaq chaymanta horizontal kaqpaq yanapakuykunata churan. Clases huk ñawpaqmanta Sass mapamanta ruwasqa kanku .25remchaymanta 3rem.

Notación

Espaciamiento yanapakuykuna llapa p'akiy puntokunaman,mantamanta , xsmana xlp'akiy abreviaturayuqchu chaykunapi. Kayqa chay clasekuna min-width: 0chaymanta wichayman churasqa kasqanrayku, chaymanta chayhina mana huk willay mast'ariq tapuywan watasqa kasqankurayku. Puchuq rakikunapim ichaqa huk pakiypa pisichasqa rimaynin kachkan.

Clases sutichasqa kanku formato {property}{sides}-{size}para xsy {property}{sides}-{breakpoint}-{size}para sm, md, lg, y xl.

Maypichus propiedad nisqaqa hukninmi:

m- para clases que establecenmargin
p- para clases que establecenpadding

Maypi ladokuna hukninmi:

t- para clases que establecen margin-topopadding-top
b- para clases que establecen margin-bottomopadding-bottom
l- para clases que establecen margin-leftopadding-left
r- para clases que establecen margin-rightopadding-right
x- para clases que establecen ambos *-lefty*-right
y- para clases que establecen ambos *-topy*-bottom
ch'usaq - huk marginicha paddingelementopa lliw 4 ladonkunapi churaq clasekunapaq

Maypichus sayayninqa hukninmi:

0- para clases que eliminan el margino paddingchayta churaspa0
1- (ñawpaqmanta) chay marginutaq paddingnisqaman churaq clasekunapaq$spacer * .25
2- (ñawpaqmanta) chay marginutaq paddingnisqaman churaq clasekunapaq$spacer * .5
3- (ñawpaqmanta) chay marginutaq paddingnisqaman churaq clasekunapaq$spacer
4- (ñawpaqmanta) chay marginutaq paddingnisqaman churaq clasekunapaq$spacer * 1.5
5- (ñawpaqmanta) chay marginutaq paddingnisqaman churaq clasekunapaq$spacer * 3
auto- para clases que establecen el margina auto

$spacers(Aswan sayaykunata yapayta atinki Sass mapa tikraqman qillqakunata yapaspa ).

Ejemplos

Kaypi wakin representativo ejemplokuna kay clasekunamanta:

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

Chawpichay horizontal

Chaymanta, Bootstrap huk .mx-autoclasetapas churan horizontalmente chawpichaypaq takyasqa-ancho bloque nivel contenidota —chayqa, contenido kaqta display: blockchaymanta huk widthhuñu— horizontal margenkunata churaspa auto.

Chawpichasqa elemento

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

Margen negativo nisqa

CSS kaqpi, marginpropiedades mana allin chanikunata llamk'achiyta atin ( paddingmana atinchu). 4.2 kaqmanta, sapa mana cero hunt'a yupay sayaypaq patamanta listasqa mana allin margen yanapakuykunata yapasqayku (kayhina, 1, 2, 3, 4, 5). Kay yanapakuykunaqa allinmi kanku canales de columna de rejillas nisqakunata ruwanankupaq, punto de ruptura nisqapi.

Sintaxis yaqa kaqlla ñawpaqmanta, allin margen yanapakuykunawan, ichaqa yapasqawan nmanaraq mañasqa sayayniyuq. Kaypi huk ejemplo clase kachkan chaymi contrario kay .mt-1:

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

Kaypi huk rikch'ana Bootstrap llikata ruwanapaq chawpi ( md) p'akiypi chaymanta pata kaqpi. Ñuqaykuqa .colyapayku acolchadowan .px-md-5chaymanta chayta contrarrestasqaykuwan .mx-md-n5tayta mamapi .row.

Acolchado de columna personalizada

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