Canales
Canalkuna columnakunaykipura acolchado kaq, kutichiq espaciopaq chaymanta Bootstrap rejilla sistemapi contenidota chiqanchaypaq llamk'achisqa.
Imayna llamkanku
-
Kanalkuna nisqaqa sapaqchasqakunap chawpinpi kaq ch'usaqkunam , horizontal nisqawan kamasqa
padding
.padding-right
Sapa columnapi chaymanta churaykupadding-left
, chaymanta negativo llamk'achiykumargin
chayta sapa fila qallariypi chaymanta tukukuypi tupachiypaq contenidota chiqanchaypaq. -
1.5rem
Canales nisqakunaqa (24px
) anchomantam qallarinku . Kayqa rejillanchikta acolchadowan chaymanta margen espaciadores escalawan tupachiyta atichiwanchik . -
Canalkunataqa kutichispa allichayta atikunmi. Clases de canalización específicas de punto de ruptura nisqawanmi canales horizontales nisqakunata, canales verticales nisqakunata, llapa canales nisqakunatapas tikrana.
Canales horizontales
.gx-*
clases nisqawanmi controlakunman chay anchos de canal horizontal nisqakunata. Chay .container
utaq .container-fluid
tayta mama ichapas allichana kanman sichus aswan hatun canalespas llamk'achisqa kanku mana mana munasqa desbordamiento kaqpaq, huk tupaq acolchado utilidad kaqwan. Ejemplopaq, kay qatiq ejemplopi kaywan acolchadota yapayku .px-4
:
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Huk huk allichayqa huk p'istuta yapaymi muyuriqninpi .row
chay .overflow-hidden
clasewan:
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Canales verticales
.gy-*
clasekunataqa sayaq canal anchokunata kamachinapaqmi llamk’achiy atikunman. Imaynan canales horizontales, chay canales verticales wakin desbordamientota ruwanman uraypi .row
huk p’anqa tukukuypi. Sichus kay ruwakun, huk p'istu muyuriqpi yapanki .row
clasewan .overflow-hidden
:
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Canales horizontales & verticales
.g-*
clasekuna llamk'achiy atikunku controlanapaq kay horizontal canal anchos kaqmanta, kay qatiq ejemplopaq huk aswan huch'uy canal anchota llamk'achiyku, chayrayku mana necesidad kanqachu yapanapaq kay .overflow-hidden
wrapper clase kaqmanta.
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Fila columnas canales
Fila columnakunamanpas canal clasekunatapas yapayta atikunmi . Kay qatiq ejemplopi, kutichiq fila columnakunata chaymanta kutichiq canalización clasekunata llamk'achiyku.
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>
Mana kanalniyuq
Ñawpaqmanta riqsisqa rejilla claseykupi columnakunapura canales nisqakunataqa .g-0
. Kayqa llapa chaylla wawakuna columnakunamanta negativo margin
s nisqakunatam hurqun .row
, horizontal nisqatapas hurqun.padding
¿Necesitan un diseño de borde a borde? Tayta mamata .container
utaq .container-fluid
.
Ruwaypiqa kaypim imayna qawakun. Reparay kayta llapa wak ñawpaqmanta riqsisqa llika clasekunawan llamk'ayta atikunki (sapaq anchokuna, kutichiq patakuna, wakmanta kamachiykuna chaymanta aswan).
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Cambiar las canales
Clases nisqakuna Sass mapamanta ruwasqa kanku $gutters
mayqinchus Sass mapamanta herenciasqa kachkan $spacers
.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);