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

Question

Je viens de commencer à utiliser Bootstrap 3. J'ai du mal à comprendre comment fonctionne la classe de la ligne. Y a-t-il un moyen d'éviter le padding-left et le padding-right?

    col

    col

    col

    col

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

Answer 1

Dans tous les systèmes de grille, il y a des espaces entre chaque colonne. Le système de Bootstrap définit un padding de 15px à la fois à gauche et à droite de chaque colonne pour créer cet espace.

Le problème est que la première colonne ne devrait pas avoir la moitié d'un espace à gauche, et la dernière ne devrait pas avoir la moitié d'un espace à droite. Au lieu 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 padding des colonnes. Cela "retire" les espaces des premières et dernières colonnes, tout en les élargissant en même temps.

La div .row ne devrait jamais vraiment être utilisée pour contenir autre chose que des colonnes de grille. Si c'est le cas, vous verrez le contenu décalé par rapport à des colonnes, comme le montre votre fiddle.

MISE À JOUR:

Vous avez modifié votre question après que j'ai répondu, donc voici la réponse à la question que vous posez maintenant: Ajoutez la classe .container au premier

. Voir exemple fonctionnel.

Answer 2

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

Answer 3

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

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

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

Answer 4

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

Answer 5

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

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

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

Vous n'avez pas besoin de le faire pour tous les Nested-Rows (si vous en avez).
Ajoutez simplement mx-auto au row le plus extérieur (ou aux Rangs) pour éviter la barre de défilement verticale.
Ne remplacez pas le comportement de tous les Rangs Bootstrap en ajoutant une classe "row" pour remplacer les marges.