Comment supprimer les gouttières dans Bootstrap dans différentes versions ?

Suppression des gouttières dans Bootstrap

Dans Bootstrap, les colonnes sont séparées par une gouttière de 30 pixels, mais il existe des cas où sa suppression est nécessaire. Cet article examine les solutions permettant de supprimer les gouttières sans recourir à l'approche margin-left: -30px.

Bootstrap 5 (dernier)

Bootstrap 5 présente une solution simplifiée. avec la classe .no-gutters. L'ajout de cette classe au .row éliminera l'espacement entre les colonnes :

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

Bootstrap 4

Bootstrap 4 a également ajouté un .no-gutters, similaire à Bootstrap 5 :

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

Bootstrap 4 comprend également des classes de gouttière réactives, offrant plus de flexibilité :

<!-- Remove gutters on small and above breakpoints -->
<div class="row g-0 g-sm-3">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

Bootstrap 3.4.0

Pour Bootstrap versions 3.4.0 et supérieures, une classe

.row-no-gutters dédiée peut être utilisé :

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

Dans les versions antérieures de Bootstrap (3 jusqu'à 3.3.9), la suppression des gouttières nécessite un ajustement à la fois la marge et le remplissage :

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

/* .row > [class*="col-"] */
.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}Ajoutez le </p>
<p>.no-gutter<strong> à la classe </strong>.row<strong> et vous êtes prêt :</strong></p>
<pre class="brush:php;toolbar:false"><div class="row no-gutter">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

En utilisant ces techniques, vous pouvez facilement éliminer les gouttières dans Bootstrap et obtenir un disposition visuelle souhaitée.

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!