42

Twitter Bootstrap を使用したレスポンシブ スタイルシートで問題が発生しています。サイトは問題なく正常に表示されますが、なんらかの理由で、応答性の高いタブレットと電話では、ページの右側にこの大きな白い隙間があります. スクロールバーの問題ではなく、大きな白い隙間があります

http://i.imgur.com/JeRRRqq.png

ここで私が大きく変わったとは思いません。幅も何もありません。Chrome でオブジェクトを調べたところ、幅がオーバーフローしているものは見つかりませんでした

4

12 に答える 12

75

これは少し遅れているかもしれませんが、他の回答は誤解を招くものであることがわかりました。

行クラスが問題の原因であることは事実ですが、それは常にコンテナー要素内に配置されることが想定されているためです。

http://getbootstrap.com/css/から:

行は、適切な配置とパディングのために、.container (固定幅) または .container-fluid (全幅) 内に配置する必要があります。

通常、コンテナー要素には左右に -15 ピクセルのパディングがあり、行クラスには左右に 15 ピクセルのパディングがあります。2つは互いに打ち消し合います。2 つのうちの 1 つが存在しない場合は、余分なスペースが表示されます。

于 2016-04-19T16:35:36.727 に答える
49

やってみました：

html, body { overflow-x: hidden; }

フィドルを投稿できますか？

于 2013-10-23T23:27:06.193 に答える
10

次のメタ タグを 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" />

こちらも設定してみる

html, body. div{
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

html と body について

于 2013-05-23T02:53:01.897 に答える
0

私は非常によく似た問題を抱えていましたが、しばらく時間をかけて、コンテナ流体クラスの左右両方に 0px のパディングを追加する CSS スタイルを適用したことに気付きました。 -行を適切な場所に保持する流体。

于 2017-12-22T20:15:39.910 に答える