Bootstrap 3-Pourquoi la classe row est-elle plus large que son conteneur?
Je viens de commencer à utiliser Bootstrap 3. Je traverse une période difficile
comprendre comment fonctionne la classe row.
Existe-t-il un moyen d'éviter les padding-left et padding-right?
<div class="row" style="background:#000000">
<div class="col-xs-4 .col-xs-offset-1">
col
</div>
<div class="col-xs-2">
col
</div>
<div class="col-xs-2">
col
</div>
<div class="col-xs-2">
col
</div>
</div>
5 réponses
Dans tous les systèmes de grille, il y a des gouttières entre chaque colonne. Amorçage du système définit un 15px rembourrage sur la gauche et la droite de chaque colonne pour créer cette gouttière.
Le problème est que la première colonne ne devrait pas avoir une moitié de gouttière à gauche, et la dernière ne devrait pas avoir une moitié de gouttière à droite. Plutôt que d'utiliser une sorte de classe .first ou .last sur ces colonnes comme le font certains systèmes de grille, ils définissent plutôt la classe .row pour avoir des marges négatives qui correspondent au remplissage de colonne. Cela "tire" les gouttières des première et dernière colonnes, tout en les rendant plus larges.
Le .row div ne devrait jamais vraiment être utilisé pour contenir autre chose que des colonnes de grille. Si c'est le cas, vous verrez le contenu déplacé par rapport à toutes les colonnes, comme cela est évident dans votre violon.
Mise à jour:
Vous avez modifié votre question après avoir répondu, alors voici la réponse à la question que vous posez Maintenant: ajoutez la classe .container à la première <div>. Voir Travail exemple.
Voir ma réponse ci-dessous à un post similaire.
Pourquoi le bootstrap .ligne a une marge par défaut à gauche de 30px?
Vous utilisez essentiellement "clearfix" au lieu de "row". Il fait exactement la même chose que "row" en excluant la marge négative.
J'ai utilisé la classe row dans la classe container et j'ai toujours eu le problème. Lorsque j'ai ajouté margin-left: auto; margin-right: auto; à la classe .row, cela a bien fonctionné.
Avec bootstrap 3.3.7 ce problème est résolu en enveloppant le .ligne avec .conteneur de fluide.
Pour tout futur développeur déboguant ce problème:
Bootstrap définit le remplissage des colonnes de ligne, de sorte qu'aucun contenu d'une ligne ne doit apparaître en dehors du conteneur. Si vous rencontrez cela et que vous utilisez le système de grille de bootstrap correctement en utilisant le col -... classes, il est probable que vous ayez des CSS supplémentaires quelque part en réinitialisant le remplissage sur les colonnes.