web-dev-qa-db-fra.com

Twitter bootstrap gap blanc sur le côté droit de la page

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

csslayouttwitter-bootstrap
28
Lynx

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.

55
Nicola Pedretti

As-tu essayé: 

html, body { overflow-x: hidden; }

Pouvez-vous poster un violon?

35
Jules

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

7
Scott Selby

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.

6
Jacob

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. 

1
Nicholas Newenham

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

1
Anupam

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é.

Source: http://getbootstrap.com/css/#overview-container

0
vikvan

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.

0
Eddie Teixeira

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.

0
AverageJoe