Canales rehegua
Umi canalización haꞌehína pe acolchado nde columna apytépe, ojeporúva ombohovái hag̃ua espacio ha oñemohenda hag̃ua contenido sistema cuadrícula Bootstrap-pe.
Mba’éichapa omba’apo hikuái
-
Umi canalización haꞌehína umi paꞌũ oĩva contenido columna apytépe, omoheñóiva horizontal
padding
. Ñamohendapadding-right
hapadding-left
peteĩteĩva vore ári, ha jaipuru negativomargin
ñamohenda hag̃ua upéva oñepyrũ ha opakuévo peteĩteĩva vore ñamohenda hag̃ua contenido. -
Umi canal oñepyrũ
1.5rem
(24px
) ipype. Péicha ikatu ñambojoaju ñande cuadrícula escala acolchado ha espaciador margen rehegua ndive . -
Umi canal ikatu oñemboheko respuesta-pe. Eipuru umi clase canalización específica punto de ruptura rehegua emoambue hagua canalización horizontal, canalización vertical ha opaite canalización.
Canalización horizontal rehegua
.gx-*
umi clase ikatu ojeporu oñecontrola hagua umi ancho canal horizontal rehegua. Pe .container
térã .container-fluid
túva ikatu oikotevẽ oñemboheko ojeporúramo avei umi canal tuichavéva ani hag̃ua ojedesborda ojeipota’ỹva, ojeporúvo peteĩ utilidad de acolchado ojoajúva. Techapyrã, ko techapyrãme ñambohetave acolchado ndive .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>
Peteĩ solución alternativa ha’e ñamoĩ peteĩ envoltura .row
pe .overflow-hidden
clase reheve:
<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>
Canalización vertical rehegua
.gy-*
umi clase ikatu ojeporu oñecontrola hagua umi ancho canal vertical rehegua. Umi canalización horizontal-icha, umi canalización vertical ikatu ojapo algún desbordamiento iguýpe pe .row
oĩva peteĩ páhina pahápe. Péva oikóramo, emoĩ peteĩ envoltura ijerére mbo’esyry .row
ndive :.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>
Canalización horizontal & vertical rehegua
.g-*
umi clase ikatu ojepuru ojejoko hagua umi canal ancho horizontal, ko techapyráramo jaipuru petet canal ancho michtvéva, upéicharamo natekotevemoíri oñembojoapy pe .overflow-hidden
clase envoltura rehegua.
<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 rehegua
Umi clase canalización rehegua ikatu avei oñembojoapy umi columna fila rehegua . Ko techapyrã oúvape, jaipuru umi columna fila ombohováiva ha umi clase canalización ombohováiva.
<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>
Ndaipóri canalización
Umi canalización oĩva columna apytépe ñande clase de rejilla ojedefinivaꞌekuépe ikatu ojeipeꞌa .g-0
. Péicha ojeipe a margin
s negativo opaite columna mitãnguéra pya .row
egui ha horizontalgui .padding
¿Reikotevẽ peteĩ diseño borde a borde? Emboguejy pe túva .container
térã .container-fluid
.
En la práctica, péina ojehecha mba'éichapa ojehecha. Eñamindu’u ikatuha eipuru meme kóva opaite ambue clase cuadrícula rehegua oñembohekopyréva ndive (oikehápe columna ancho, niveles ombohováiva, reorden ha hetave mba’e).
<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>
Omoambue umi canalización
Umi mbo’esyry oñemopu’ã $gutters
Sass mapa-gui ha’éva heredada $spacers
Sass mapa-gui.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);