Comment éliminer l'espacement des gouttières entre les colonnes Bootstrap ?

Comment supprimer l'espacement des gouttières entre les colonnes dans Bootstrap

L'espacement entre les colonnes dans Bootstrap peut créer une apparence visuellement encombrée lorsqu'il n'est pas souhaité. Voici comment éliminer cet espace de gouttière sans définir de marges individuelles :

Bootstrap 5 et versions ultérieures

Dans Bootstrap 5, la classe .no-gutters a été remplacée par .g -0. Vous pouvez l'utiliser sur l'élément .row pour supprimer tout espacement entre les colonnes :

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

Bootstrap 5 fournit également des classes de gouttière réactives qui vous permettent d'ajuster l'espacement pour des points d'arrêt spécifiques. Par exemple, .gx-sm-4 supprimerait la gouttière horizontale uniquement sur les écrans avec un « petit » point d'arrêt (par exemple, les smartphones).

Bootstrap 4

Dans Bootstrap 4, vous pouvez utiliser la classe .no-gutters directement sur le .row :

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

Bootstrap 3.4.0

Dans Bootstrap 3.4, une classe dédiée .row-no-gutters a été introduite :

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

Bootstrap 3 (<= 3.3.9)

Dans Bootstrap 3.3.9 et versions antérieures, les gouttières sont créées à l'aide du remplissage. Pour les supprimer, vous devez utiliser le CSS suivant :

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

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
Ajoutez la classe .no-gutter à l'élément .row.
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!