Comment supprimer l'espace de gouttière dans les systèmes de grille Bootstrap ?

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

Introduction

Le système de grille Bootstrap utilise une gouttière par défaut de 30 px entre les colonnes, contribuant à une mise en page propre et cohérente. Cependant, il peut être souhaitable de supprimer cet espace de gouttière pour des éléments spécifiques d'une rangée. Cet article explore les techniques permettant d'atteindre cet objectif sans compromettre la réactivité de Bootstrap ni introduire d'espace vide disgracieux.

Bootstrap 3.x

Pour Bootstrap 3.x, la solution est devenue plus simple. Un rembourrage est désormais utilisé pour créer la gouttière, ce qui la rend plus facile à retirer. Implémentez le CSS suivant :

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

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

Pour supprimer la gouttière pour des divs spécifiques, attribuez simplement la classe "no-gutter" à la ligne correspondante.

Bootstrap 4.x

Bootstrap 4.x inclut une classe utilitaire intégrée, « no-gutters », qui permet d'obtenir le résultat souhaité. effet.

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

Bootstrap 5.x

La dernière itération de Bootstrap offre un contrôle encore plus granulaire sur l'espacement des gouttières avec l'introduction de classes de gouttières. Utilisez "g-0" pour supprimer entièrement les gouttières ou ajustez-les à l'aide des classes "g-1-5". Ces classes peuvent également être appliquées de manière réactive avec des points d'arrêt, tels que "gx-sm-4" pour ajuster les gouttières horizontales pour les écrans inférieurs à 768 pixels.

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!