web-dev-qa-db-fra.com

utiliser container-fluid dans bootstrap cause une barre de défilement horizontale

Voici un exemple simple:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">DUMMY CONTENT</div>
    </div>
</div>

Démo en violon

Lorsque je vois le résultat dans le navigateur, une barre de défilement horizontale s’affiche.

Pourquoi cela arrive-t-il?

Qu'est-ce que je fais mal?

csstwitter-bootstraptwitter-bootstrap-3grid-system
44
agis

container-fluid a été retiré de Bootstrap 3.0, mais a été ajouté à nouveau en 3.1.1 =

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

  1. Utilisez la version plus récente de Bootstrap)

    Démo avec une nouvelle feuille de style en violon

  2. Ou ajoutez vous-même le cours

    Le .row ajoute un 15px marge à gauche et à droite. Puisque .container-fluid remplit 100% de la largeur de l'écran, la marge supplémentaire provoque des problèmes de débordement.

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

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

    Démo avec la classe de conteneur Custom dans Fiddle

52
KyleMit

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 ajouter manuellement le overflow-x:hidden à ma balise body:

body { 
   overflow-x: hidden;
}

Jsfiddle

37
lvarayut

Dans mon cas, ce correctif a bien fonctionné:

.row {
  margin-left: 0;
  margin-right: 0;
}
9
Viktor L
.row{
margin: 0px;
}

solution facile et rapide c'est tout ce dont vous avez besoin

4
Christopher Clear

Assurez-vous d'encapsuler vos classes de lignes avec des conteneurs.

<div class="container">
    <div class="row">
        text
    </div>
</div>

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

2
David Stack

Vous pouvez salir 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;
 }
<div class="row noLRMar">
  
 </div>
2
Omar Noor

Avec Bootstrap 3.3.5, je recevais une barre de défilement horizontale de certaines largeurs proche du passage de la taille d’écran moyenne (md) à petite (sm). Ajouter un div.row _ entre mes div.container-fluid et div.container l'a corrigé pour moi.

<div class="container-fluid  myFullWidthStylingClass">
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    #content
                </div>
            </div>
        </div>
    </div>
</div>

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

0
user5507241

Dans mon cas, remplacer @grid-Gutter-width Par un nombre impair a provoqué ceci, 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 un Gutter-width Impair, vous obtiendrez un remplissage inégal et une barre de défilement horizontale.

0
Harsh Vakharia