Gouttières

Gutters sò u padding trà i vostri culonni, utilizati per u spaziu rispunsevuli è allineà u cuntenutu in u sistema di griglia Bootstrap.

In sta pagina

Cumu travaglianu

Gutters sò i spazii trà u cuntenutu di a colonna, creati da l'orizontale padding. Avemu stabilitu padding-rightè padding-leftnantu à ogni colonna, è utilizate negativu marginper compensà quellu à u principiu è à a fine di ogni fila per allineà u cuntenutu.
Gondini partenu da 1.5rem( 24px) largu. Questu ci permette di currisponde à a nostra griglia à a scala di padding and margin spacers .
I gutters ponu esse adattati in modu responsive. Aduprate classi di gouttière specifiche per u puntu di ruptura per mudificà i goutte horizontale, verticali, è tutte e goutte.

Gouttières horizontales

.gx-*classi pò ièssiri usatu pi cuntrullà i larghezza gutter horizontale. L' .containeru .container-fluidparente pò esse aghjustatu se i più grandi sò usati ancu per evità un overflow indesideratu, usendu una utilità di padding currispondente. Per esempiu, in l'esempiu seguente avemu aumentatu u padding cù .px-4:

Imbottitura di colonna persunalizata

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

Una soluzione alternativa hè di aghjunghje un wrapper intornu .rowà a .overflow-hiddenclasse:

Imbottitura di colonna persunalizata

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

Gouttières verticales

.gy-*classi pò ièssiri usatu pi cuntrullà i larghezza gutter verticale. Cum'è i canali horizontali, i canali verticali ponu causà qualchì overflow sottu .rowà a fine di una pagina. Se questu succede, aghjunghje un wrapper intornu .rowà a .overflow-hiddenclasse:

Imbottitura di colonna persunalizata

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

Gouttières verticales et horizontales

.g-*classi ponu esse aduprati per cuntrullà l'larghezza orizontale di u gutteru, per l'esempiu seguitu usemu una larghezza di gutter più chjuca, perchè ùn ci sarà micca bisognu di aghjunghje a .overflow-hiddenclassa wrapper.

Imbottitura di colonna persunalizata

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

Colonne di fila di grondaie

E classi di gutter ponu ancu esse aghjuntu à e colonne di fila . In l'esempiu seguitu, usemu colonne di fila responsive è classi di gutter responsive.

Colonna di fila

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

Nisuna canna

I canali trà e colonne in e nostre classi di griglia predefinite ponu esse eliminati cù .g-0. Questu sguassate u negativu margins da .rowè l'orizontale paddingda tutti i culonni di i zitelli immediata.

Avete bisognu di un disignu di punta à punta? Abbandunate u genitore .containero .container-fluid.

In pratica, eccu cumu si vede. Nota chì pudete cuntinuà aduprà questu cù tutte l'altri classi di griglia predefiniti (cumprese larghezza di colonna, livelli responsivi, riordini, è più).

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

.col-6 .col-md-4

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

Cambià i canali

E classi sò custruiti da a $guttersmappa Sass chì hè ereditata da a $spacersmappa Sass.

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