web-dev-qa-db-ja.com

Bootstrap 2.3 CSS Responsive left with a white space with the right

私はウェブサイトを作成しています（私はこれが初心者です）。私はデザインの機能的な部分に取り組んでおり、後でグラフィックスを誰かにやらせます。

現在、レスポンシブ（モバイルビュー）になると、右側に2pxのマージンが残り、モバイルブラウザーで移動できます（スクロール可能）。私の人生でそれを取り除くことはできません。

私がoverflow-x：を非表示にすると、スクロールできなくなりますが、引き続き移動できます。

私はその余分なスペースを取り除きたいです。どのCSSでもパディングとして定義されているとは思いません。

Bootstrap 2.3を使用

csstwitter-bootstraptwitter-bootstrap-2
18
Andrew

これを私のカスタムCSSに追加することで解決しました：

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

注： ！important は使用されているだけなので、他のCSSよりも優先されます。 bootstrap CSSの後にカスタムCSSをロードする場合、ほとんどのインスタンスは!importantを必要としません。

62
Andrew

私はここでゲームにとても遅れていることを知っていますが、なぜこれが最初に起こるのかを理解しました。 navbarを使用している場合、navbar-right要素にあるべきではない余分なパディングがあります。このギャップを生じさせる15pxのマージン権があります。上書きして問題を解決してください！

3
Anna Wygant

置換.containerクラスと.container-fluid本文と。cssファイルでpadding right and left : 0px; それでおしまい。

2
Nilesh

私はこれを試みましたが、それはブラウザベースのモバイルエミュレータでのみ機能しました。また、ブラウザーのサイズを変更したときにもうまく機能します。

しかし、携帯電話で確認すると、Samsung Galaxy S2とiPhone 5にはまだ空白が表示されます。

私も試しました：

@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

マージン左、マージン右を削除

そして変化

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

に

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

.rowを別の.container-fluidクラス要素でラップするだけでこれを解決しました。これでマージンが処理されます。

0
andromeda