web-dev-qa-db-fra.com

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

Je viens juste de commencer à utiliser Bootstrap 3. J'ai du mal à comprendre le fonctionnement de 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>

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

twitter-bootstraptwitter-bootstrap-3
107
Petran

Dans tous les systèmes de grille, il y a des gouttières entre chaque colonne. Le système de Bootstrap définit un remplissage 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 devrait pas avoir un demi-gouttière à gauche, et la dernière ne devrait pas avoir une demi-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 ont plutôt défini la classe .row pour avoir des marges négatives correspondant au remplissage des colonnes. Ceci "tire" les gouttières des première et dernière colonnes, tout en les rendant plus larges.

Le .row div ne devrait jamais être utilisé pour contenir autre chose que des colonnes de grille. Si tel est le cas, vous verrez le contenu décalé par rapport aux colonnes, comme le montre votre violon.

MISE À JOUR:

Vous avez modifié votre question après avoir répondu. Voici donc la réponse à la question que vous posez maintenant: ajoutez la classe .container au premier <div>. Voir exemple de travail .

135
Sean Ryan

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

21
dbarma

Voir ma réponse ci-dessous à post similaire.

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

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

18
Kyle

J'ai utilisé la classe row à l'intérieur de la classe container et j'avais toujours le problème. Lorsque j'ai ajouté margin-left: auto; margin-right: auto; à la classe .row, cela a bien fonctionné.

15
Jeffrey

Pour tous les futurs développeurs déboguant ce problème:

Bootstrap définit le remplissage des colonnes de lignes, de sorte qu'aucun contenu d'une ligne ne doit apparaître en dehors du conteneur. Si vous rencontrez ce problème et que vous utilisez correctement le système de grille de bootstrap à l'aide des classes col -..., il est probable que vous ayez des feuilles de style CSS supplémentaires réinitialisant le remplissage des colonnes.

1
JSideris

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

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

Vous devez mettre à jour votre premier élément div comme suit:

<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 row (ou rangées) la plus extérieure pour éviter la barre de défilement verticale.
Ne remplacez pas le comportement de toutes les Bootstrap Rows en ajoutant une classe "row" pour remplacer les marges.

1
MikeTeeVee