Comment puis-je supprimer les gouttières dans Bootstrap ?

Suppression des gouttières dans Bootstrap : un guide complet

Introduction

Lorsque vous travaillez avec Bootstrap, la gouttière de 30 pixels entre les colonnes peut parfois être un frein à votre conception. Dans cet article, nous explorerons différentes méthodes pour supprimer cette gouttière sans recourir à la définition de marges négatives.

Bootstrap 5

La dernière version de Bootstrap 5 introduit une classe dédiée , .no-gutters, qui peuvent être ajoutés à l'élément .row pour supprimer tous les éléments horizontaux et verticaux gouttières.

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

De plus, Bootstrap 5 fournit une gamme de nouvelles classes de gouttières pour affiner l'espacement entre les colonnes de manière réactive.

Bootstrap 4

Pour Bootstrap 4, la classe .no-gutters peut également être utilisée sur l'élément .row pour supprimer gouttières.

<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

Bootstrap 3.4.0 a introduit la classe .row-no-gutters spécialement conçue pour supprimer les gouttières.

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

Bootstrap 3, <= 3.3.9

Pour les versions Bootstrap 3 antérieures à 3.4.0, les gouttières sont créées à l'aide du remplissage. Pour les supprimer, vous pouvez définir une classe CSS personnalisée :

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

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