web-dev-qa-db-ja.com

Twitter bootstrapページの右側にある白い隙間

Twitter Bootstrapのレスポンシブスタイルシートに問題があります。このサイトは問題なく表示されますが、何らかの理由で、レスポンシブタブレットと携帯電話のページの右側にこの大きな空白があります。スクロールバーではなく、大きな白い隙間があります

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

私はここでまったく変わったとは思わない。幅など何もありません。 Chromeでオブジェクトを検査しましたが、幅方向にオーバーフローするものは見られませんでした

csslayouttwitter-bootstrap
31
Lynx

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

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

from http://getbootstrap.com/css/ ：

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

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

60
Nicola Pedretti

やってみました：

html, body { overflow-x: hidden; }

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

39
Jules

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

7
Scott Selby

私は同じ問題を抱えています。パディングを作成する原因となっているオブジェクトがBootstrapの「行」クラスであることを発見しました。

追加する場合

.row {
  padding-right: 0px;
  margin-right: 0px;
}

あなたのCSSファイル/行オブジェクトに、これはあなたのページでパディングを引き起こすアイテムの少なくとも1つを修正するはずです。

6
Jacob

私はこの問題を抱えていましたが、この答えのどれも私を助けませんでした、私はこの方法で私の問題を解決しました：

body { overflow-x: hidden; width: 100vw;}
1
Abolfazl Miadian

通常、これは、設定されたコンテナ幅の境界を破るdivがあるために発生します.divまたはセクションのパディング、マージン、配置などです幅を壊しています。

1
Nicholas Newenham

私は最近、非常に似たような問題を抱えていました。私にとっては、通常の行/コンテナの問題ではありませんでした。私はform-controlを使用してチェックボックスを手動でレンダリングしていました。ブートストラップでは、form-controlを持つすべてのテキスト要素にwidth:100%デフォルト があります。多くのチェックボックスをオンラインにすると、それらが（目に見えないように）溢れ出し、右側にこの大きな白い隙間ができました。驚いたことに、Chrome Devツールを使用してこれをデバッグすることも簡単ではありませんでした。

現在、次のソリューションを使用して、widthをauto;に設定しています（- this answer helped）：

<input class="form-control form-control-inline" type="checkbox" ... ... .. />

そして

.form-control-inline {
  width: auto;
}

それが誰かを助けることを願っています

1
Anupam

また、コンテナの使用方法を確認してください。ネストすることはできず、問題が発生します。

プロジェクトで使用する2つのコンテナのいずれかを選択できます。パディングなどにより、どちらのコンテナもネストできないことに注意してください。

出典：http://getbootstrap.com/css/#overview-container

0
vikvan

私は非常に似た問題を抱えていたので、しばらく時間を過ごした後、コンテナ流体クラスの左右に0pxのパディングを追加するCSSスタイリングを適用しているため、スタイリングはコンテナに必要なデフォルトの-15pxパディングを上書きしました-行を適切な場所に保持するための流体。

0
Eddie Teixeira

モバイルデバイスでも同様の問題が発生しました。問題は、小さな画面サイズで要素を非表示にしていたが、その親コン​​テナを忘れていたことです。コンテンツが空であっても、このコンテナはまだレンダリングされていたため、適切なサイトに大きな空白ができていました。これは、子ではなく親要素を非表示にすることで解決しました。

0
AverageJoe