Comment supprimer l'espace de gouttière de divisions spécifiques dans Bootstrap ?

Suppression de l'espace de gouttière pour un div spécifique

Le système de grille Bootstrap par défaut utilise une disposition à 12 colonnes avec une gouttière de 30 pixels séparant les colonnes. Bien que Bootstrap fournisse une classe sans gouttières pour supprimer les gouttières d'une ligne entière, cela peut conduire à un espace supplémentaire à la fin de la ligne.

Pour les situations où vous devez supprimer l'espace de gouttière pour des divs spécifiques uniquement, envisagez les options suivantes :

Bootstrap 5

• Utiliser le nouveau g-* classes de gouttières pour ajuster les gouttières de manière réactive en fonction de points d'arrêt spécifiques.
• g-0 élimine toutes les gouttières.
• g-(1-5) ajuste les gouttières horizontales et verticales à l'aide d'unités d'espacement.
• gy-* ajuste uniquement les gouttières verticales.
• gx-* ajuste les gouttières horizontales uniquement.

Bootstrap 4

• Incorporez la classe no-gutters à la ligne, qui supprime les gouttières de toutes les colonnes :

  <div>

• Utilisez les utilitaires d'espacement pour contrôler les marges des colonnes individuelles et padding :

  <div>

Bootstrap 3

• Exploitez la classe row.no-gutter, qui ajuste les deux marges et rembourrage à enlever gouttières :

  .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;
  }

Exemple (Bootstrap 3) :

<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!