Canalons

Els canalons són el farciment entre les columnes, que s'utilitzen per espaiar i alinear el contingut de manera sensible al sistema de quadrícula Bootstrap.

En aquesta pàgina

Com funcionen

Els canalons són els buits entre el contingut de la columna, creats per horitzontal padding. Establem padding-righti padding-lefta cada columna i utilitzem el negatiu marginper compensar-lo a l'inici i al final de cada fila per alinear el contingut.
Els canalons comencen a 1.5rem( 24px) d'ample. Això ens permet fer coincidir la nostra quadrícula amb l' escala dels separadors de marge i farciment .
Els canalons es poden ajustar de manera sensible. Utilitzeu classes de canalons específiques per al punt d'interrupció per modificar canalons horitzontals, canalons verticals i tots els canalons.

Canalons horitzontals

.gx-*Les classes es poden utilitzar per controlar les amplades horitzontals de canalons. Pot ser que s'hagi d'ajustar el pare .containero .container-fluidsi també s'utilitzen canalons més grans per evitar desbordaments no desitjats, utilitzant una utilitat de farciment coincident. Per exemple, a l'exemple següent hem augmentat el farciment amb .px-4:

Encoixinat de columnes personalitzat

html

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

Una solució alternativa és afegir un embolcall al voltant .rowde la .overflow-hiddenclasse:

Encoixinat de columnes personalitzat

html

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

Canalons verticals

.gy-*Les classes es poden utilitzar per controlar l'amplada de canal vertical dins d'una fila quan les columnes s'ajusten a línies noves. Igual que els canalons horitzontals, els canalons verticals poden provocar un desbordament per sota .rowdel final d'una pàgina. Si això passa, afegiu un embolcall .rowamb la .overflow-hiddenclasse:

Encoixinat de columnes personalitzat

html

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

Canalons horitzontals i verticals

.g-*Les classes es poden utilitzar per controlar l'amplada de canal horitzontal, per a l'exemple següent fem servir una amplada de canaló més petita, de manera que no caldrà afegir la .overflow-hiddenclasse wrapper.

Encoixinat de columnes personalitzat

html

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

Filera columnes canalons

Les classes de canal també es poden afegir a les columnes de fila . A l'exemple següent, utilitzem columnes de fila sensibles i classes de canals sensibles.

Columna de fila

html

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

Sense canalons

Els canals entre columnes a les nostres classes de quadrícula predefinides es poden eliminar amb .g-0. Això elimina la margins negativa .rowi l'horitzontal paddingde totes les columnes secundàries immediates.

Necessites un disseny de punta a punta? Deixeu anar el pare .containero .container-fluidi afegiu .mx-0- hi .rowper evitar desbordaments.

A la pràctica, així és com es veu. Tingueu en compte que podeu continuar utilitzant-ho amb totes les altres classes de graella predefinides (incloses les amplades de columnes, els nivells de resposta, les reordenacions i molt més).

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

.col-6 .col-md-4

html

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

Canvia els canalons

Les classes es construeixen a partir del $guttersmapa Sass que s'hereta del $spacersmapa Sass.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);