Comment supprimer les gouttières Bootstrap de divisions spécifiques sans rompre la réactivité ?

Comment supprimer l'espace de gouttière pour une division spécifique sans affecter la réactivité du Bootstrap

Dans une mise en page Bootstrap, les gouttières créent l'espace blanc entre les colonnes, généralement d'environ 20 à 30 px de large. . Bien que cela fournisse une séparation visuellement attrayante, il peut y avoir des cas où vous souhaitez supprimer cette gouttière pour des divs spécifiques sans perturber la réactivité de la mise en page.

Solution Bootstrap 3

Pour Bootstrap 3, le le retrait des gouttières est devenu plus simple grâce à l'utilisation de rembourrages au lieu de marges pour créer les gouttières. Voici le code CSS :

.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 dans Bootstrap 3, ajoutez simplement la classe "no-gutter" aux lignes correspondantes :

<div class="row no-gutter">
  <div class="col-lg-1"><div>1</div></div>
  <div class="col-lg-1"><div>1</div></div>
  <div class="col-lg-1"><div>1</div></div>
</div>

Bootstrap 4 et 5 Solutions

Bootstrap 4 introduit le "sans gouttières" classe pour supprimer les gouttières d'une rangée entière :

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

Bootstrap 5 développe davantage cela avec des classes de gouttières qui permettent un contrôle précis de l'espacement horizontal et vertical. Les classes comprennent :

• g-0 pour pas de gouttières
• g-(1-5) pour ajuster l'espacement
• gy-* pour ajuster l'espacement vertical
• gx-* pour ajuster l'espacement horizontal

Par exemple, pour supprimer la gouttière pour des tâches spécifiques divs tout en préservant la réactivité :

#main_content .col {
  padding: 0 !important;
}

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

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!