Bootstrap - Comment supprimer la gouttière entre les colonnes
Je ne sais pas si c'est la bonne façon de le faire, mais comment puis-je supprimer le 30px gouttière entre les colonnes? Mais sans marge gauche:-30px ensemble.
<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>
source d'informationauteur Friede Petr
Vous devez vous connecter pour publier un commentaire.
Une meilleure façon de supprimer de rembourrage sur les colonnes à ajouter un
.no-pad
classe à votre.row
:...et puis ajouter ce CSS.
C'est une mauvaise idée de chercher
first-
etlast-child
éléments comme le fait le.row
est destinée à prendre soin de ces décalages dans la fenêtre de droite et de gauche. Avec la méthode ci-dessus tous les.col-*
s restent à l'identique de style, qui est d'ailleurs beaucoup plus simple lors de l'examen de la réactivité, en particulier de l'empilement au mobile tailles (tenter ma démonstration ci-dessousmd
taille).Direct descendant sélecteur CSS
>
signifie que le.no-pad
ne sera appliquée que pour que.row
'immédiat de l'enfant.col
s, de sorte que vous pouvez avoir le rembourrage sur la suite de colonnes imbriquées les structures (ou pas) si vous le souhaitez.Également à l'aide de l'attribut sélecteur de
[class*='col-']
signifie que chaque colonne doit sans supplément de non-Bootstrap classes ajouté.Voici une démo: http://www.bootply.com/Ae3xTyAW5D
Mise à jour 2018
Bootstrap 4 comprend maintenant un
.no-gutters
classe que vous pouvez juste ajouter à la.row
.Bootstrap 4: http://www.codeply.com/go/OBW3RK1ErD
Bootstrap 3 gouttières sont créés à l'aide de rembourrage. Vous devez également ajuster la marge négative, de sorte que l'espacement autour de l'extérieur des colonnes n'est pas effectuée.
Il suffit d'ajouter le
no-gutter
classe à la.row
.Démo: http://bootply.com/107458
Au lieu d'appliquer des correctifs qui sont difficiles à maintenir, je suggère de générer votre propre version personnalisée du Bootstrap à partir de la Customizer où vous pouvez définir la gouttière à la taille que vous voulez (ou la supprimer totalement, par la valeur 0).