utiliser un conteneur-fluide dans le bootstrap provoque une barre de défilement horizontale

container-fluid été initialement sorti de Bootstrap 3.0, mais a été rajouté en 3.1.1

Pour résoudre ce problème, vous pouvez soit :

1. Utilisez la nouvelle version de la feuille de style Bootstrap

   Démo avec nouvelle feuille de style en violon

2. Ou ajoutez vous-même la classe

   Le .row ajoute une marge de 15px à gauche et à droite. Puisque .container-fluid remplit 100% de la largeur de l’écran, l’espace de marge supplémentaire entraîne des problèmes de dépassement.

   Pour résoudre ce problème, vous devez append un remplissage à .container-fluid classe .container-fluid

    .container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } 

   Démo avec une classe de conteneur personnalisée dans Fiddle

J’ai aussi fait face à ce problème. Je ne connais pas la cause du problème. C’est peut-être un bug de Twitter Bootstrap . Maintenant, je dois append manuellement le overflow-x:hidden à ma balise body :

 body { overflow-x: hidden; } 

Jsfiddle

Dans mon cas, cette correction a bien fonctionné:

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

 .row{ margin: 0px; } 

solution rapide facile c’est tout ce dont vous avez besoin

Veillez à encapsuler vos classes de lignes avec des conteneurs.

 
 
 text 
  

Le conteneur compense les marges -15 sur les lignes avec +15 .

Avec Bootstrap 3.3.5, j’obtenais une barre de défilement horizontale à certaines largeurs près de la modification de la taille de l’écran moyen (md) à petit (sm). Ajouter un div.row entre mon div.container-fluid et div.container corrigé pour moi.

 
 
 
 
 
 #content 
 
 
 
  

Ajout de margin:0; à vos lignes va casser certains éléments de style.

Dans mon cas, changer @grid-gutter-width en nombre impair a causé cela, car;

mixins/grid.less

 .container-fixed(@gutter: @grid-gutter-width) { margin-right: auto; margin-left: auto; padding-left: floor((@gutter / 2)); padding-right: ceil((@gutter / 2)); &:extend(.clearfix all); } 

Donc, si vous choisissez une gutter-width étrange, vous finirez par avoir des rembourrages inégaux et vous verrez une barre de défilement horizontale.

Vous pouvez pirater la ligne en ajoutant une nouvelle classe à la ligne pleine largeur et créer un fichier CSS de remplacement:

 .noLRMar{ margin-right: 0 !important; margin-left: 0 !important; } 

Définissez max-width dans la classe de conteneur au lieu de width. Cela enlèvera la barre horizontale.

 .container-fluid { border:1px solid red; max-width:1349px; min-height:1356px; padding:0px; margin:0px; }