grondaie

Le grondaie sono il riempimento tra le colonne, utilizzato per spaziare in modo reattivo e allineare il contenuto nel sistema di griglia Bootstrap.

Su questa pagina

Come funzionano

Le grondaie sono gli spazi vuoti tra il contenuto delle colonne, creati da horizontal padding. Impostiamo padding-righte padding-leftsu ogni colonna e usiamo negativo marginper compensare quello all'inizio e alla fine di ogni riga per allineare il contenuto.
Le grondaie iniziano a 1.5rem( 24px) di larghezza. Questo ci consente di abbinare la nostra griglia alla scala del riempimento e dei distanziatori dei margini .
Le grondaie possono essere regolate in modo reattivo. Utilizzare le classi di grondaie specifiche del punto di interruzione per modificare le grondaie orizzontali, verticali e tutte le grondaie.

Grondaie orizzontali

.gx-*le classi possono essere utilizzate per controllare le larghezze della grondaia orizzontale. Potrebbe essere necessario regolare il genitore .containero .container-fluidse vengono utilizzate anche grondaie più grandi per evitare un trabocco indesiderato, utilizzando un'utilità di riempimento corrispondente. Ad esempio, nell'esempio seguente abbiamo aumentato il padding con .px-4:

Imbottitura delle colonne personalizzata

<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 è aggiungere un wrapper .rowcon la .overflow-hiddenclasse:

Imbottitura delle colonne personalizzata

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

Grondaie verticali

.gy-*le classi possono essere utilizzate per controllare le larghezze verticali della grondaia. Come le grondaie orizzontali, le grondaie verticali possono causare un trabocco al di sotto .rowdella fine di una pagina. In questo caso, aggiungi un wrapper .rowcon la .overflow-hiddenclasse:

Imbottitura delle colonne personalizzata

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

Grondaie orizzontali e verticali

.g-*le classi possono essere utilizzate per controllare le larghezze della grondaia orizzontale, per l'esempio seguente utilizziamo una larghezza della grondaia più piccola, quindi non sarà necessario aggiungere la .overflow-hiddenclasse wrapper.

Imbottitura delle colonne personalizzata

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

Grondaie di colonne di riga

Le classi Gutter possono anche essere aggiunte alle colonne di riga . Nell'esempio seguente, utilizziamo colonne di riga reattive e classi di rigatura reattiva.

Riga colonna

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

Niente grondaie

Le grondaie tra le colonne nelle nostre classi di griglia predefinite possono essere rimosse con .g-0. Ciò rimuove le margins negative .rowe l'orizzontale paddingda tutte le colonne figlie immediate.

Hai bisogno di un design edge-to-edge? Rilascia il genitore .containero .container-fluid.

In pratica, ecco come appare. Tieni presente che puoi continuare a usarlo con tutte le altre classi di griglia predefinite (incluse le larghezze delle colonne, i livelli reattivi, i riordini e altro).

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

Cambia le grondaie

Le classi sono costruite dalla $guttersmappa Sass che è ereditata dalla $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,
);