web-dev-qa-db-fra.com

La classe de lignes Bootstrap contient margin-left et margin-right, ce qui crée des problèmes

J'utilise la classe Bootstrap 'row' pour aligner divs les unes sur les autres, ce qui fonctionne bien, mais 

.row {
   margin-left: -15px;
   margin-right: -15px;
 }

Ce que j'ai remarqué, c'est qu'il spécifie que les attributs margin-left et margin-right doivent être de -13 pixels à cause desquels mon contenu est décalé vers la gauche. donc ce que j'ai fait est ajouté une autre classe comme suit:

.row-no-margin {
   margin-left: 0px;
   margin-right: 0px;
}

Cela résout le problème, mais j'aimerais quand même savoir s'il existe une raison spécifique pour 'margin-left: -15px; '. Et quelle est la meilleure approche pour résoudre mon problème.

htmlcsstwitter-bootstraptwitter-bootstrap-3
35
Tarun Gupta

Le .row est destiné à être utilisé dans une container. Puisque container a un remplissage pour ajuster la marge négative dans .row, les colonnes de grille utilisées dans .row peuvent alors s’ajuster à la largeur totale du conteneur. Voir la documentation Bootstrap: http://getbootstrap.com/css/#grid

Voici un exemple pour illustrer: http://bootply.com/131054

Donc, une meilleure solution peut vous permettre de placer votre .row dans un .container ou .container-fluid

69
Zim

Vous pouvez utiliser row-fluid au lieu de row, vous n'aurez alors pas ce problème. (pour les versions précédentes de bootstrap)

Je ne suis pas sûr des versions récentes 3, en aucun cas:

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 un 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 sur des marges négatives correspondant au remplissage des colonnes. Cela «arrache» les gouttières des première et dernière colonnes tout en les rendant plus larges.

Pour plus d'informations à ce sujet Pourquoi le bootstrap .row a-t-il une marge par défaut de -30px?

6
4dgaurav

Utilisez-vous Bootstrap 3? Ma version du css a -15px, pas -13px. Dans tous les cas, j’ai simplement fait ce que vous aviez écrit et écrasé le style ..__ Je crois que c’est parce que la classe .container a un rembourrage de 15 px à gauche et à droite et que cette marge négative sur les lignes ce contenu vers le bord du conteneur.

2
JesseEarley

Vieux sujet, mais j'ai récemment été touché par cela. 

Utiliser une classe "row-fluid" au lieu de "row" a bien fonctionné pour moi, mais je ne suis pas sûr que cela soit totalement pris en charge. 

Donc, après avoir lu Pourquoi le bootstrap .row a-t-il une marge par défaut de -30px Je viens d'utiliser le <div> (sans classe de ligne) et il se comporte exactement comme <div class="row-fluid">

0
ShhTot

Je faisais face au même problème et au départ, j'ai supprimé les marges droite et gauche de la rangée et le défilement horizontal, mais ce n'était pas bon. Puis, après 45 minutes d’inspection et de recherche, j’ai découvert que j’utilisais du fluide pour conteneur et que je retirais le rembourrage et que sa rangée intérieure présentait des marges négatives gauche et droite. J'ai donc remis le liquide de conteneur à l'arrière et tout est rentré dans l'ordre.

Si vous devez supprimer le remplissage du conteneur, ne supprimez pas simplement les marges négatives gauche et droite de chaque ligne de votre projet, mais introduisez une classe et utilisez-la sur le conteneur de votre choix

0
Junaid