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.

Ko páhinape

Mba’éichapa omba’apo hikuái

Umi canalización haꞌehína umi paꞌũ oĩva contenido columna apytépe, omoheñóiva horizontal padding. Ñamohenda padding-rightha padding-leftpeteĩteĩva vore ári, ha jaipuru negativo marginñ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 .containertérã .container-fluidtú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:

Acolchado de columna personalizada rehegua

<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 .rowpe .overflow-hiddenclase reheve:

Acolchado de columna personalizada rehegua

<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 .rowoĩva peteĩ páhina pahápe. Péva oikóramo, emoĩ peteĩ envoltura ijerére mbo’esyry .rowndive :.overflow-hidden

Acolchado de columna personalizada rehegua

<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-hiddenclase envoltura rehegua.

Acolchado de columna personalizada 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.

Columna de fila rehegua

<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 margins negativo opaite columna mitãnguéra pya .rowegui ha horizontalgui .padding

¿Reikotevẽ peteĩ diseño borde a borde? Emboguejy pe túva .containerté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).

.col-sm-6 .col-md-8 rehegua

.col-6 .col-md-4 rehegua

<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’ã $guttersSass mapa-gui ha’éva heredada $spacersSass 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,
);