Comment puis-je supprimer ou ajuster l'espace de gouttière dans Bootstrap pour des divisions spécifiques ?

Suppression de l'espace de gouttière pour des divisions spécifiques

Le système de grille par défaut de Bootstrap comprend un espace de gouttière de 30 px entre les colonnes, ce qui donne une ligne avec 360 px d'espace inutilisé si les gouttières sont complètement supprimées. Pour résoudre ce problème, tout en conservant la réactivité de Bootstrap, suivez ces étapes :

Bootstrap 5 (depuis la mise à jour 2021)

Bootstrap 5 a introduit des classes de gouttière spécifiques :

• g-0 : Non gouttières
• g-(1-5) : Ajustez les gouttières horizontales et verticales à l'aide des unités d'espacement
• gy-* : Ajustez les gouttières verticales
• gx-* : Ajuster l'horizontale gutters

Exemple :

<div class="row g-0">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Bootstrap 4 (aucun CSS supplémentaire requis)

Bootstrap 4 fournit la classe sans gouttières pour lignes :

<div class="row no-gutters">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Bootstrap 3 (original Réponse)

Bootstrap 3 a introduit l'utilisation de rembourrage au lieu de marges pour les gouttières. Pour obtenir cet effet :

1. Créez une nouvelle classe CSS :

.row.no-gutter {
    margin-left: 0;
    margin-right: 0;
}

2. Supprimez le remplissage de toutes les colonnes sauf la première et la dernière :

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
    padding-right: 0;
    padding-left: 0;
}

3. Appliquer la classe sans gouttière au niveau souhaité lignes :

<div class="row no-gutter">
    <div class="col-lg-1">...</div>
    <div class="col-lg-1">...</div>
    <div class="col-lg-1">...</div>
</div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!