Comment supprimer l'espace gouttière d'une division spécifique dans Bootstrap ?

Supprimer l'espace de gouttière pour une division spécifique uniquement sans compromettre la réactivité

Le système de grille Bootstrap inclut généralement un espace de gouttière par défaut entre les colonnes, ce qui entraîne une mise en page plus attrayante visuellement. Cependant, dans certains scénarios, on peut souhaiter supprimer cet espace de gouttière pour un div spécifique.

Solution Bootstrap 5 :

Bootstrap 5 introduit des classes de gouttière dédiées qui offrent de la flexibilité en ajustant l’espacement des gouttières dans toute la grille. Pour supprimer les gouttières pour un div spécifique, utilisez la classe g-0. De plus, vous pouvez utiliser les classes gx-* et gy-* pour personnaliser respectivement les gouttières horizontales et verticales, en maintenant la réactivité à travers différents points d'arrêt.

Solution Bootstrap 4 :

Dans Bootstrap 4, y parvenir est simple. Le framework comprend une classe sans gouttières qui peut être appliquée à une ligne spécifique, supprimant efficacement l'espace de gouttière pour toutes les colonnes de cette ligne.

Solution Bootstrap 3 :

Pour Bootstrap 3, l’approche diffère légèrement. En raison de l'utilisation de remplissage au lieu de marges pour les gouttières, le CSS suivant peut être appliqué au div souhaité :

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

.no-gutter [class*='col-']:not(:first-child),
.no-gutter [class*='col-']:not(:last-child) {
  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!