Comment empêcher le défilement horizontal sur la page web responsive?

Je suis en utilisant twitter bootstrap pour faire mon application sensible. Quand j'ai rétrécir la largeur de ma fenêtre de navigateur à la taille minimale ou consulter la page sur un appareil mobile (iPhone, par exemple), l'utilisateur est en mesure de faire défiler horizontalement. Le montant de défilement horizontale est petit, mais je voudrais enlever tous ensemble.

Je crois que c'est en raison de l'img conteneur que je suis, y compris, mais je ne suis pas ici. Le html de la page se trouve ici: http://pastebin.ca/2347946.

Des conseils sur la façon de prévenir la barre de défilement horizontale de la page, tout en conservant le défilement dans la img conteneur?

Comment un CSS problème soit résolu sans le CSS? Pastebin ne va pas durer éternellement.
vérifiez votre code et de syntaxe que par bootstrap, documentation, vous pourriez avoir quelque part placée ligne, des conteneurs ou des cols à tort

OriginalL'auteur sharataka | 2013-04-02

  1. 11

    je suis sûr que quelque part l'un de vos enfant de l'élément est supérieure à la largeur de son élément parent. Vous de vérifier le code à deux fois, si il y a une boîte de la taille de l'enfant intérieur, éléments de est grande à cause d'une des raisons - quand la largeur de la zone, y compris margin, padding, border aller au-delà de la limite. Et nous n'avons pas ajouté de overflow: hidden; à l'extérieur de l'élément parent. Dans ce cas, elles sont considérées comme allant au-delà de leur élément parent, et que les navigateurs le montrer avec la barre de défilement. Ainsi, il fixe par la suppression de marges supplémentaires, les rembourrages, les frontières, ou si vous ne voulez pas de maux de tête, juste essayer d'ajouter overflow:hidden; à l'extérieur de la boîte.

    J'ai essayé de faire ce qui vous a recommandé, mais n'était pas sûr de savoir où chercher. Savez-vous où je devrais l'inclure dans la page: warm-chamber-7399.herokuapp.com

    OriginalL'auteur Akshaya Raghuvanshi

  2. 14

    J'ai eu le même problème, et a appliqué cette solution:

    body {
    overflow-x: hidden !important;
}
.container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

    Pour développer un peu, je n'ai eu le problème sur les téléphones mobiles, de sorte que c'est mon code final:

    @media screen and (max-width: 667px) {
    body {
        overflow-x: hidden !important;
    }
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

    J'ai trouvé que les questions relatives à présent sur Github, donc je suppose que les nouvelles versions de Bootstrap ont été patchés.

    Génial cela fonctionne
    merci u it vraiment simple mais qui fonctionne

    OriginalL'auteur Nino Škopac

  3. 0

    Essayez d'ajouter (dans la @-rule) un max-width:

    img {
    max-width: NNNpx;
}

    Qui va empêcher img d'être trop large.

    J'ai tenté d'inclure ce max-width attribut, mais n'était pas sûr de l'y inclure. Les conseils de cette page? warm-chamber-7399.herokuapp.com
    Je n'étais pas sûr que l'image que vous faisiez allusion à votre réponse.

    OriginalL'auteur FelipeAls

  4. 0

    Le "overflow: hidden;" le style est le remède pas de la prévention.
    Si vous voulez éviter cela, vous devez vérifier avec votre corps des éléments, qui est plus grande que le corps.
    Il se passe quand vous prenez un div avec quelques "padding" ou "marge" de l'extérieur ".conteneur" classe (twitter bootstrap).
    Donc, supprimer tout le rembourrage et de la marge à l'extérieur de la classe container.

    OriginalL'auteur EM Hossain