web-dev-qa-db-fra.com

Bootstrap 2.3 CSS Responsive à gauche avec un espace blanc à droite

Je crée un site Web (et je suis un noob à ce sujet). Je travaille sur la partie fonctionnalité du design et je demanderai à quelqu'un de faire des graphiques plus tard.

Actuellement, lorsqu'il passe en mode responsive (vue mobile), il laisse une marge de 2 pixels sur la droite qui peut être déplacée sur un navigateur mobile (et qui peut défiler). Je ne peux pas pour la vie me débarrasser de cela.

si j'active overflow-x: hidden, il ne devient pas scrollable mais reste déplaçable.

Je veux que cet espace supplémentaire disparaisse. Je ne le vois pas défini comme un rembourrage dans aucun des fichiers css.

Utiliser Bootstrap 2.3

csstwitter-bootstraptwitter-bootstrap-2
18
Andrew

Résolu en ajoutant ceci à mon css personnalisé:

html, body {
  width: auto !important;
  overflow-x: hidden !important;
}

Remarque: le ! Important est uniquement utilisé, il est donc prioritaire par rapport aux autres CSS. La plupart des instances n'auront pas besoin de !important si vous chargez votre CSS personnalisé après votre CSS d'amorçage.

62
Andrew

Je sais que je suis trop tard pour le jeu ici, mais j'ai compris pourquoi cela se produit en premier lieu ... Si vous utilisez une barre de navigation, il y a du rembourrage supplémentaire dans l'élément de droite qui ne devrait pas être là . Il a une marge droite de 15px qui cause cet écart. Écrasez-le et le problème est résolu!

3
Anna Wygant

Remplacez .container par .container-fluid dans le corps et dans votre fichier .css make le padding right and left : 0px; C'est tout.

2
Nilesh

J'ai essayé de le faire, mais cela ne fonctionnait que sur des émulateurs mobiles basés sur un navigateur. Cela fonctionne également bien lorsque je redimensionne mon navigateur.

Mais lorsque je vérifie sur mon téléphone - le Samsung Galaxy S2 et l'iPhone 5, il me montre toujours l'espace blanc.

J'ai aussi essayé: 

@media handheld and (max-width: 481px) and (orientation: portrait) {
  html,body{width:100%;overflow-x:hidden;}
}

@media handheld and (max-width: 380px) and (orientation: portrait) {
  html,body{width:100%;overflow-x:hidden;}
}
1
Ritesh A

Supprimer la marge gauche, la marge droite

Et changer

    <div class="navbar">
    <div class="navbar-inner navbar-fixed-top">

à

    <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">`
0
patnav

J'ai résolu ce problème en enveloppant simplement .row dans un autre élément de la classe .container-fluid. Cela devrait prendre soin de la marge.

0
andromeda