J'ai un problème avec ma feuille de style responsive avec Twitter Bootstrap. Le site s'affiche correctement, sans problème, mais pour une raison quelconque, la tablette et le téléphone responsive ont cet énorme espace blanc à droite de la page. Ce n'est pas le problème de la barre de défilement
http://i.imgur.com/JeRRRqq.png
Je ne crois pas avoir beaucoup changé du tout ici. Rien avec la largeur ou quoi que ce soit. Inspecter les objets dans Chrome et ne pas voir quoi que ce soit déborder de largeur
C'est peut-être un peu tard, mais j'ai trouvé les autres réponses trompeuses.
Il est vrai que c'est la classe de lignes qui est à l'origine du problème, mais c'est parce qu'elle est toujours supposée être placée dans un élément conteneur.
de http://getbootstrap.com/css/ :
Les rangées doivent être placées dans un .container (largeur fixe) ou un .container-fluid (pleine largeur) pour un alignement et un remplissage appropriés.
L'élément conteneur a généralement un remplissage de -15px à droite et à gauche et la classe de rangée a un remplissage de 15px à droite et à gauche. Les deux s'annulent. Si l'un des deux n'est pas présent, vous verrez un espace supplémentaire.
As-tu essayé:
html, body { overflow-x: hidden; }
Pouvez-vous poster un violon?
Ajouter la balise META suivante à votre code HTML
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />
Essayez aussi de mettre
html, body. div{
margin: 0 !important;
padding: 0 !important;
width: 100%;
}
sur le html et le corps
J'ai le même problème. J'ai découvert que l'objet à l'origine de la création du rembourrage était la classe "row" de Bootstrap.
Si vous ajoutez
.row {
padding-right: 0px;
margin-right: 0px;
}
pour vos objets de fichier/ligne CSS, cela devrait corriger au moins un des éléments causant un bourrage sur votre page.
Cela se produit généralement parce que vous avez une division qui casse les limites de la largeur de conteneur définie. Elle peut être une division ou des sections, une marge, un positionnement .. vous pouvez utiliser la flèche d’inspecteur ou le débordement: caché sur la balise de conteneur pour voir quelle section vous pourriez utiliser. avoir briser la largeur.
J'ai eu un problème très similaire récemment qui m'a pris assez de temps à comprendre. Pour moi, ce n'était pas le problème habituel des lignes/conteneurs. J'utilisais un form-control
pour rendre les cases manuellement. Dans Bootstrap, tous les éléments textuels avec form-control
ont width:100%
par défaut . Avoir plusieurs cases à cocher en ligne les faisait se renverser (de manière invisible) et causer ce grand espace blanc à droite. De manière surprenante, le débogage à l'aide d'outils de développement Chrome n'a pas été facile.
J'utilise maintenant la solution suivante pour définir la width
sur auto;
( this answer a aidé):
<input class="form-control form-control-inline" type="checkbox"
... ... .. />
et
.form-control-inline {
width: auto;
}
J'espère que ça aide quelqu'un
Vérifiez également comment vous utilisez les conteneurs. Ils ne peuvent pas être imbriqués, ils vont causer des problèmes.
Vous pouvez choisir l’un des deux conteneurs à utiliser dans vos projets. Notez que, en raison du remplissage et plus encore, aucun conteneur n'est imbriqué.
J'ai juste eu un problème très similaire et après avoir passé un certain temps, j'ai réalisé que j'avais appliqué un style CSS en ajoutant un remplissage de 0px à la gauche et à la droite d'une classe de fluide de conteneur. -fluid pour maintenir les rangées à leur place.
J'ai eu un problème similaire sur les appareils mobiles. Le problème était que j'avais caché un élément sur des tailles d'écran plus petites, mais j'avais oublié son conteneur parent. Ce conteneur était toujours en cours de rendu, même si son contenu était vide, ce qui créait un grand espace blanc sur le bon site. Cacher l'élément parent au lieu de l'enfant a résolu ce problème pour moi.