Gouttières

Les gouttières sont le rembourrage entre vos colonnes, utilisées pour espacer et aligner de manière réactive le contenu dans le système de grille Bootstrap.

Sur cette page

Comment ils travaillent

Les gouttières sont les espaces entre le contenu des colonnes, créés par horizontal padding. Nous définissons padding-rightet padding-leftsur chaque colonne, et utilisons négatif marginpour compenser cela au début et à la fin de chaque ligne pour aligner le contenu.
Les gouttières commencent à 1.5rem( 24px) de large. Cela nous permet d'adapter notre grille à l' échelle de rembourrage et d'espaceurs de marge .
Les gouttières peuvent être ajustées en conséquence. Utilisez des classes de gouttière spécifiques aux points d'arrêt pour modifier les gouttières horizontales, les gouttières verticales et toutes les gouttières.

Gouttières horizontales

.gx-*les classes peuvent être utilisées pour contrôler les largeurs de gouttière horizontales. Le parent .containerou .container-fluidpeut devoir être ajusté si des gouttières plus grandes sont également utilisées pour éviter un débordement indésirable, en utilisant un utilitaire de remplissage correspondant. Par exemple, dans l'exemple suivant, nous avons augmenté le rembourrage avec.px-4 :

Rembourrage de colonne personnalisé

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

Une solution alternative consiste à ajouter un wrapper autour .rowde la .overflow-hiddenclasse :

Rembourrage de colonne personnalisé

<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-*les classes peuvent être utilisées pour contrôler les largeurs de gouttière verticales. Comme les gouttières horizontales, les gouttières verticales peuvent provoquer un certain débordement en dessous .rowde la fin de page. Si cela se produit, vous ajoutez un wrapper .rowavec la .overflow-hiddenclasse :

Rembourrage de colonne personnalisé

<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 horizontales et verticales

.g-*Les classes peuvent être utilisées pour contrôler les largeurs de gouttière horizontales, pour l'exemple suivant, nous utilisons une largeur de gouttière plus petite, il n'est donc pas nécessaire d'ajouter la .overflow-hiddenclasse wrapper.

Rembourrage de colonne personnalisé

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

Gouttières de colonnes de ligne

Des classes de gouttière peuvent également être ajoutées aux colonnes de ligne . Dans l'exemple suivant, nous utilisons des colonnes de ligne réactives et des classes de gouttière réactives.

Colonne de ligne

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

Pas de gouttières

Les gouttières entre les colonnes dans nos classes de grille prédéfinies peuvent être supprimées avec .g-0. Cela supprime le margins négatif .rowet l'horizontal paddingde toutes les colonnes enfants immédiates.

Besoin d'un design bord à bord ? Supprimez le parent .containerou .container-fluid.

En pratique, voici à quoi cela ressemble. Notez que vous pouvez continuer à l'utiliser avec toutes les autres classes de grille prédéfinies (y compris les largeurs de colonne, les niveaux réactifs, les réorganisations, etc.).

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

Changer les gouttières

Les classes sont construites à partir de la $gutterscarte Sass qui est héritée de la $spacerscarte Sass.

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