Bootstrap 3 - Pourquoi la classe de ligne est-elle plus large que son conteneur?

116

Je viens de commencer à utiliser Bootstrap 3. J'ai du mal à comprendre comment fonctionne la classe row. Existe-t-il un moyen d'éviter le padding-leftet 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>

http://jsfiddle.net/petran/rdRpx/

twitter-bootstrap twitter-bootstrap-3 Petran
la source
@Adrift est-ce toujours vrai? Je ne sais pas si vous voulez dire qu'ils ne fonctionnent pas correctement, car je les utilise et ils semblent fonctionner comme ils le devraient.
Céréale
1
@Cereal: Plus maintenant. Cela a été ajouté dans la v3.0.2
dérive
3
car la ligne bootstrap a -15px marges gauche et droite.
Probablement pas votre problème, mais pour toute autre personne ayant le même type de problème: assurez-vous que vous n'avez qu'un seul attribut de classe sur vos divs. Je les ai accidentellement doublés et j'ai eu le même problème.
The One True Colter

Réponses:

151

Dans tous les systèmes de grille, il y a des gouttières entre chaque colonne. Le système de Bootstrap définit un rembourrage de 15 px à la fois à gauche et à droite de chaque colonne pour créer cette gouttière.

Le problème est que la première colonne ne doit pas avoir une demi-gouttière à gauche et la dernière ne doit pas avoir une demi-gouttière à droite. Plutôt que d'utiliser une sorte de classe .firstou .lastsur ces colonnes comme le font certains systèmes de grille, ils définissent à la place .rowdes marges négatives qui correspondent au remplissage des colonnes. Cela «tire» les gouttières des première et dernière colonnes, tout en l'élargissant.

Le .rowdiv ne doit jamais vraiment être utilisé pour contenir autre chose que des colonnes de grille. Si tel est le cas, vous verrez le contenu décalé par rapport à n'importe quelle colonne, comme le montre votre violon.

METTRE À JOUR:

Vous avez modifié votre question après avoir répondu, voici donc la réponse à la question que vous posez maintenant: ajoutez la .containerclasse à la première <div>. Voir l' exemple de travail .

Sean Ryan
la source
2
Les colonnes de la grille sont séparées par un remplissage, pas une marge (dans BS3)
dérive du
3
Génial! Cela explique tout le contenu débordant.
Rutwick Gangurde
27

Avec bootstrap 3.3.7, ce problème est résolu en enveloppant le .row avec .container-fluid.

dbarma
la source
cela a fonctionné pour moi, même si au départ je pensais que non, c'est parce que j'avais la console Web du développeur ouverte, ce qui réduit la largeur, mais apparemment le gâche aussi. L'utilisation .container-fluida également été suggérée ici: stackoverflow.com/a/23616447/5272567
Matthias
fonctionne aussi lorsque le div d'emballage est en position absolute. merci pour l'indice
InsOp
si je pouvais voter pour cette réponse plusieurs fois ... :)
rony36
Même correctif pour Bootstrap 4.
Rob L
19

Voir ma réponse ci-dessous à un message similaire.

Pourquoi le bootstrap .row a-t-il une marge gauche par défaut de -30px?

Vous utilisez essentiellement "clearfix" au lieu de "row". Il fait exactement la même chose que "ligne" en excluant la marge négative.

Kyle
la source
2
Ces classes font deux choses différentes, même si elles peuvent sembler le faire visuellement. Clear n'est pas aussi flexible dans les situations réactives et avec les systèmes de grille, le comportement de .row est correct.
Todd Baur
Cela résout le contenu débordant en dehors du wrapper.
Bhojendra Rauniyar
Mais le meilleur moyen est d'envelopper la ligne avec le conteneur.
Bhojendra Rauniyar
MEILLEUR ASWER! UP!
Anderson Bressane
18

J'ai utilisé la classe de ligne à l'intérieur de la classe de conteneur et j'ai toujours eu un problème. Quand j'ai ajouté margin-left: auto; margin-right: auto;à la .rowclasse, cela a bien fonctionné.

Jeffrey
la source
8
Cela a fonctionné comme un charme! L'ajout de la classe 'mx-auto' dans bootstrap 4 a résolu le problème de débordement pour moi.
Michelle M.
3

@Michelle M. devrait recevoir le crédit complet pour cette réponse.
Elle a dit dans l'un des commentaires:

L'ajout de la classe 'mx-auto' dans bootstrap 4 a résolu le problème de débordement pour moi.

Vous devrez mettre à jour votre premier divélément comme ceci:

<div class="row mx-auto" style="background:#000000">

Pas besoin de faire cela pour toutes les lignes imbriquées (si vous en avez).
Ajoutez simplement mx-autoà la plus externe row(ou aux lignes) pour éviter la barre de défilement vertical.
Ne remplacez pas le comportement de toutes les lignes Bootstrap en ajoutant une classe «ligne» pour remplacer les marges.

MikeTeeVee
la source
1

Pour tous les futurs développeurs 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 correctement le système de grille de bootstrap en utilisant les classes col -..., il est probable que vous ayez du CSS supplémentaire quelque part pour réinitialiser le remplissage sur les colonnes.

JSideris
la source
Ou vous avez une ancienne version de Bootstrap. Par exemple, 3.0.0 distribué avec VS2015. Voir github.com/twbs/bootstrap/issues/8959
Aventure du