レスポンシブウェブページの水平スクロールを防止するにはどうすればよいですか？

Question

私はアプリを反応させるために、Twitterのブートストラップを使用しています。ブラウザウィンドウの幅を最小サイズに縮小したり、モバイルデバイス（iPhoneなど）でページを表示すると、ユーザーは水平方向にスクロールすることができます。水平スクロールの量は少ないですが、私はそれを一括して削除したいと思います。

私はそれが私が含んでいるimgの容器のためだと信じていますが、私はここにいません。このページのhtmlは、http://pastebin.ca/2347946です。

imgコンテナのスクロールを維持したまま、ページの横スクロールを防止する方法についてアドバイスしますか？

Answer 1

あなたの子要素のどこかがその親要素の幅を超えていることは間違いありません。ボックスの幅がmargin、padding、borderを超えた場合などの理由のため、内側の子要素のボックスサイズが大きい場合、コードを2回確認してください。おそらく、外側の親要素にoverflow: hidden;を追加していない可能性があります。この場合、それらは親要素を越えて到達すると考えられ、ブラウザはスクロールバーでそれを表示します。余分なマージン、パディング、枠線を削除することで修正してください。あるいは頭痛がほしいと思わない場合は、overflow:hidden;を外枠に追加してみてください。

Answer 2

は（関連@-ruleで）max-widthを追加しよう：

img { 
    max-width: NNNpx; 
} 

広すぎることからimgを防ぐだろうと。

Answer 3

は、私は同じ問題を抱えていたし、それを修正するためにこれを適用：

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

ビットを展開するには、私は携帯電話で問題を抱えていたので、これは私の最終的なコードです：

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

Githubでこれに関する問題が見つかったので、新しいバージョンのBootstrapがパッチされていると思います。

Answer 4

"overflow：hidden;"スタイルは予防ではない治療法です。 これを防ぐには、ボディよりも大きなボディエレメントをチェックする必要があります。 これは、 ".container"クラス（twitterブートストラップ）の外にある "パディング"または "マージン"を使ってdivを取るときに起こります。 したがって、コンテナクラスの外側のすべてのパディングとマージンを削除します。