in English

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

html nisqapi

<div class="container px-4 text-center">
  <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

html nisqapi

<div class="container overflow-hidden text-center">
  <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-*clasekuna huk fila ukhupi sayaq canal anchokunata kamachinapaq llamk'achiy atikunman mayk'aq columnakuna musuq chirukunaman p'istuykunku. 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

html nisqapi

<div class="container overflow-hidden text-center">
  <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

html nisqapi

<div class="container text-center">
  <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

html nisqapi

<div class="container text-center">
  <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? Urmachiy tayta mamata .containerutaq .container-fluidhinaspa yapay .mx-0chayman .rowmana hunt’akunanpaq.

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

html nisqapi

<div class="row g-0 text-center">
  <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,
);