26

アプリをレスポンシブにするために、twitter ブートストラップを使用しています。ブラウザー ウィンドウの幅を最小サイズに縮小するか、モバイル デバイス (iPhone など) でページを表示すると、ユーザーは水平方向にスクロールできます。横スクロール量は少ないですがまとめて外したいです。

含めている img コンテナが原因だと思いますが、ここにはいません。このページの html はhttp://pastebin.ca/2347946にあります。

img コンテナー内のスクロールを維持しながら、ページの水平スクロールを防止する方法に関するアドバイスはありますか?

4

5 に答える 5

35

私は同じ問題を抱えていたので、これを適用して修正しました：

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 にはパッチが適用されていると思います。

于 2016-01-29T06:43:53.003 に答える
30

子要素のいずれかが親要素の幅を超えていると確信しています。margin、padding、を含むボックスの幅borderが制限を超えた場合など、いずれかの理由で内部の子要素のボックスサイズが大きい場合は、コードを 2 回確認してください。overflow: hidden;そして、その外側の親要素に追加していない可能性があります。この場合、それらは親要素を超えて到達していると見なされ、ブラウザーはスクロールバーでそれを表示します。したがって、余分なマージン、パディング、ボーダーを削除するか、頭痛がしたくない場合はoverflow:hidden;、外側のボックスに追加してみてください。

于 2013-04-03T20:43:23.073 に答える
0

@-rule（関連する） aを追加してみてくださいmax-width：

img {
    max-width: NNNpx;
}

img広すぎるのを防いでくれます。

于 2013-04-02T16:30:11.787 に答える