Comment supprimer les gouttières de colonne Bootstrap sans marges négatives ?

Élimination des gouttières de colonnes dans Bootstrap sans utiliser de marges négatives

Problème :

Comment supprimer l'espacement par défaut de 30 px entre les colonnes dans Bootstrap sans recourir à la définition de valeurs négatives marges ?

Solution :

Selon votre version de Bootstrap, voici les approches recommandées :

Bootstrap 5 :

• Nouvelle approche : Utiliser la classe .g-0 pour éliminer les gouttières dans la .row.
• Gouttières en rangée : améliorez la réactivité en appliquant des classes de gouttières conçues pour des points d'arrêt spécifiques (par exemple, .gx-sm-4 pour les gouttières horizontales sur les petits écrans).

Bootstrap 4 :

• Simplifié : Implémentez la classe .no-gutters directement sur le .row.
• Exemple de code :

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

Bootstrap 3.4.0 :

• Basé sur les classes : utilisez la nouvelle classe .row-no-gutters.

Bootstrap 3, ≪= 3.3.9 :

• Ajustement du remplissage : modifiez le remplissage dans les colonnes et ajoutez une classe .no-gutter personnalisée au .row.
• Code CSS :

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

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
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!