web-dev-qa-db-fra.com

Bootstrap - Comment supprimer la gouttière entre les colonnes

Comment puis-je supprimer la gouttière 30px entre les colonnes? Mais sans mettre margin-left:-30px?

<div class='container'>
  <div class='row'>

    <div class='col-lg-1'></div>
    <div class='col-lg-1'></div>
    <div class='col-lg-1'></div>

  </div>
</div>
twitter-bootstraptwitter-bootstrap-3bootstrap-4
20
Friede Petr

Une meilleure façon de supprimer le remplissage des colonnes serait d'ajouter une classe .no-pad À votre .row:

 <div class="row no-pad">

... puis ajoutez ce CSS.

.row.no-pad {
  margin-right:0;
  margin-left:0;
}
.row.no-pad > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

C'est une mauvaise idée de rechercher les éléments first- Et last-child Car en réalité le .row Est censé prendre soin de ces décalages à droite et à gauche de la fenêtre. Avec la méthode ci-dessus, tous les .col-* Restent de style identique, ce qui est également beaucoup plus simple lorsque l'on considère la réactivité, en particulier l'empilement aux tailles mobiles (essayez ma démo en dessous de la taille md).

Le sélecteur CSS descendant direct > Signifie que .no-pad Ne sera appliqué qu'aux enfants immédiats de .row De .col, Vous pouvez donc avoir un remplissage sur les structures de colonnes imbriquées par la suite (ou non) si vous le souhaitez.

L'utilisation du sélecteur d'attributs [class*='col-'] Signifie également que chaque colonne n'a pas besoin d'ajouter de classes non Bootstrap supplémentaires.

Voici une démo: http://www.bootply.com/Ae3xTyAW5D

42
Francis Booth

Mise à jour 2018

Bootstrap 4 inclut désormais un .no-gutters classe que vous pouvez simplement ajouter à .row.

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

Bootstrap 4: http://www.codeply.com/go/OBW3RK1ErD

Bootstrap 3.4.0 + les gouttières sont créées à l'aide du rembourrage, mais elles ont ajouté un .row-no-gutters classe. Voir la documentation pour Bootstrap 3.4 et recherchez 'Supprimer les gouttières'.

HTML que vous pouvez utiliser:

<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 les gouttières sont créées à l'aide du rembourrage. Vous devez également ajuster la marge négative afin que l'espacement autour des colonnes extérieures ne soit pas affecté.

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

.no-Gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

Ajoutez simplement le no-Gutter classe au .row.

Démo: http://bootply.com/107458

30
Zim

Au lieu d'appliquer des correctifs difficiles à maintenir, je suggère de générer votre propre version personnalisée de Bootstrap à partir du Customizer où vous pouvez définir la gouttière à la taille souhaitée (ou supprimez-le totalement en le mettant à 0).

4
Maciej Gurban

Bootstrap 3 a introduit le .row-no-gutters class dans la v3.4.0, qui fonctionne exactement comme annoncé.

Pour supprimer les gouttières d'une ligne et de ses colonnes, ajoutez simplement cette classe au <div>.

2
dyve