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 margin
utaq chanikunata churay. padding
Sapa propiedades kaqpaq, tukuy propiedades kaqpaq, chaymanta sayaq chaymanta horizontal kaqpaq yanapakuykunata churan. Clases huk ñawpaqmanta Sass mapamanta ruwasqa kanku .25rem
chaymanta 3rem
.
Notación
Espaciamiento yanapakuykuna llapa p'akiy puntokunaman,mantamanta , xs
mana xl
p'akiy abreviaturayuqchu chaykunapi. Kayqa chay clasekuna min-width: 0
chaymanta 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 xs
y {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 establecenmargin-top
opadding-top
b
- para clases que establecenmargin-bottom
opadding-bottom
l
- para clases que establecenmargin-left
opadding-left
r
- para clases que establecenmargin-right
opadding-right
x
- para clases que establecen ambos*-left
y*-right
y
- para clases que establecen ambos*-top
y*-bottom
- ch'usaq - huk
margin
ichapadding
elementopa lliw 4 ladonkunapi churaq clasekunapaq
Maypichus sayayninqa hukninmi:
0
- para clases que eliminan elmargin
opadding
chayta churaspa0
1
- (ñawpaqmanta) chaymargin
utaqpadding
nisqaman churaq clasekunapaq$spacer * .25
2
- (ñawpaqmanta) chaymargin
utaqpadding
nisqaman churaq clasekunapaq$spacer * .5
3
- (ñawpaqmanta) chaymargin
utaqpadding
nisqaman churaq clasekunapaq$spacer
4
- (ñawpaqmanta) chaymargin
utaqpadding
nisqaman churaq clasekunapaq$spacer * 1.5
5
- (ñawpaqmanta) chaymargin
utaqpadding
nisqaman churaq clasekunapaq$spacer * 3
auto
- para clases que establecen elmargin
a 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-auto
clasetapas churan horizontalmente chawpichaypaq takyasqa-ancho bloque nivel contenidota —chayqa, contenido kaqta display: block
chaymanta huk width
huñu— horizontal margenkunata churaspa auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margen negativo nisqa
CSS kaqpi, margin
propiedades mana allin chanikunata llamk'achiyta atin ( padding
mana 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 n
manaraq 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 .col
yapayku acolchadowan .px-md-5
chaymanta chayta contrarrestasqaykuwan .mx-md-n5
tayta mamapi .row
.
<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>