Canales

Canalkuna columnakunaykipura acolchado kaq, kutichiq espaciopaq chaymanta Bootstrap rejilla sistemapi contenidota chiqanchaypaq llamk'achisqa.

Kay p'anqapi

Imayna llamkanku

Kanalkuna nisqaqa sapaqchasqakunap chawpinpi kaq ch'usaqkunam , horizontal nisqawan kamasqa padding. padding-rightSapa columnapi chaymanta churayku padding-left, chaymanta negativo llamk'achiyku marginchayta sapa fila qallariypi chaymanta tukukuypi tupachiypaq contenidota chiqanchaypaq.
1.5remCanales 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 .containerutaq .container-fluidtayta 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:

Acolchado de columnas personalizadas

<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 .rowchay .overflow-hiddenclasewan:

Acolchado de columnas personalizadas

<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 .rowhuk p’anqa tukukuypi. Sichus kay ruwakun, huk p'istu muyuriqpi yapanki .rowclasewan .overflow-hidden:

Acolchado de columnas personalizadas

<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-hiddenwrapper clase kaqmanta.

Acolchado de columnas personalizadas

<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.

Fila columna

<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 margins nisqakunatam hurqun .row, horizontal nisqatapas hurqun.padding

¿Necesitan un diseño de borde a borde? Tayta mamata .containerutaq .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).

.col-sm-6 .col-md-8 nisqa

.col-6 .col-md-4 nisqa

<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 $guttersmayqinchus 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,
);