Passà à u cuntenutu principale Salta à a navigazione di documenti
in English

Gouttières

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

Cumu travaglianu

  • Gutters sò i spazii trà u cuntenutu di a colonna, creati da l'orizontale padding. Avemu stabilitu padding-rightè padding-left​​nantu à 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
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
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
Imbottitura di colonna persunalizata
Imbottitura di colonna persunalizata
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
Imbottitura di colonna persunalizata
Imbottitura di colonna persunalizata
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
Colonna di fila
Colonna di fila
Colonna di fila
Colonna di fila
Colonna di fila
Colonna di fila
Colonna di fila
Colonna di fila
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,
);