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.

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 à l'iniziu è à a fine di ogni fila per allineà u cuntenutu.
I canotti cumincianu à 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 horizontali, verticali, è tutte e goutte.

Gouttières horizontales

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

Imbottitura di colonna persunalizata

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 soluzione alternativa hè di aghjunghje un wrapper intornu .rowà a .overflow-hiddenclasse:

Imbottitura di colonna persunalizata

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>

Gouttières verticales

.gy-*e classi ponu esse aduprate per cuntrullà l'larghezza di i canali verticali in una fila quandu e colonne s'imbulighjanu in novi linee. 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 .rowcù a .overflow-hiddenclasse:

Imbottitura di colonna persunalizata

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>

Gouttières horizontales et verticales

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

Imbottitura di colonna persunalizata

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>

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

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>

Nisun gutters

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? Drop the parent .containeror .container-fluidand add .mx-0to the .rowto prevent overflow.

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

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>

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