Source

Espaciamiento

Bootstrap huk hatun llimp'i taquigrafía kutichiq margen kaqmanta 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>