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 le
paddinghorizontal. Nous définissonspadding-rightetpadding-leftsur chaque colonne et utilisez unemargenégative pour la décaler au début et à la fin de chaque ligne afin d'aligner le contenu. -
Les gouttières commencent à
1.5rem(24px) de large. Cela nous permet de faire correspondre notre grille au espaceurs de rembourrage et de marge échelle. -
Les gouttières peuvent être ajustées de manière réactive. Utilisez des classes de gouttières 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
Les classes.gx-* 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 du .row avec la classe .overflow-hidden :
<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
Les classes.gy-* 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 sous le .row à la fin d'une page. Si cela se produit, vous ajoutez un wrapper autour de .row avec la classe .overflow-hidden :
<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
Les classes.g-* 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, donc il ne sera pas nécessaire d'ajouter le .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
Les classes de gouttière peuvent également être ajoutées aux colonnes de lignes. 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 les marges négatives de .row et le padding horizontal de toutes les colonnes enfants immédiates.
Besoin d'une conception 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 carte $gutters Sass qui est héritée de la carte $spacers Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);