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.
Comment ils travaillent
-
Les gouttières sont les espaces entre le contenu des colonnes, créés par horizontal
padding
. Nous définissonspadding-right
etpadding-left
sur chaque colonne, et utilisons négatifmargin
pour 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 .container
ou .container-fluid
peut 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
:
<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 .row
de la .overflow-hidden
classe :
<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 .row
de la fin de page. Si cela se produit, vous ajoutez un wrapper .row
avec la .overflow-hidden
classe :
<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-hidden
classe wrapper.
<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.
<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 margin
s négatif .row
et l'horizontal padding
de toutes les colonnes enfants immédiates.
Besoin d'un design bord à bord ? Supprimez le parent .container
ou .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.).
<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 $gutters
carte Sass qui est héritée de la $spacers
carte Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);