l'utilisation de container-fluide dans bootstrap provoquer scrollbar 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
Quand je vois le résultat dans le navigateur j'obtiens une barre de défilement horizontale.
pourquoi cela se produit-il?
Qu'est-ce que je fais de mal?
9 réponses
container-fluid a été à l'origine de Bootstrap 3.0, mais ajout 3.1.1
Pour résoudre ce problème, vous pouvez :
nouvelle version de la feuille de style Bootstrap
Démo avec une Nouvelle Feuille de Style en cours de Violon
Ou ajouter dans la classe vous-même
.rowajoute un15pxmarge à gauche et à droite. Depuis.container-fluidremplit100%de la largeur de l'écran, l'espace de marge supplémentaire provoque des problèmes de débordement.pour corriger cela, vous devez ajouter du rembourrage à
.container-fluidclasse.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }démo avec la classe de conteneur personnalisé dans Fiddle
Dans mon cas, ce correctif a bien fonctionné:
.row {
margin-left: 0;
margin-right: 0;
}
.row{
margin: 0px;
}
rapide et facile de résoudre ce problème est tout ce que vous devez
assurez-vous d'encapsuler vos classes de rangée avec des conteneurs.
<div class="container">
<div class="row">
text
</div>
</div>
Le conteneur des décalages de l' -15 marges sur les lignes +15.
avec Bootstrap 3.3.5, je recevais une barre de défilement horizontale à certaines largeurs près du changement de la moyenne (md) à la petite (sm) taille de l'écran. L'ajout d'un div.row entre div.container-fluid et div.container fixe 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; pour vos lignes de briser certains éléments de style.
dans mon cas, changer @grid-gutter-width à nombre impair causé cela, parce que;
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 Impair gutter-width puis vous finirez par avoir inégale paddings 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 le fichier CSS de réécriture:
.noLRMar{
margin-right: 0 !important;
margin-left: 0 !important;
}<div class="row noLRMar">
</div>Set max-width dans la classe conteneur au lieu de largeur. Il va supprimer la barre horizontale.
.container-fluid {
border:1px solid red;
max-width:1349px;
min-height:1356px;
padding:0px;
margin:0px;
}