2013-10-16 8 views
23

ブラウザのサイズが992pxの場合、.containerの最大幅は970pxです。ブラウザのサイズが991pxの場合、.containerの最大幅は750pxです。なぜ最大幅でこの大きなジャンプがありますか?ブラウザウィンドウのサイズを変更すると、大きなジャンプをするのではなく、スムーズにコンテナの幅が調整されるように、最大​​幅が1170pxかそれとも20pxの余白を持っているのはなぜですか?ブートストラップ3がコンテナの幅を一定の大きさにするのはなぜですか?

など。 992pxの画面幅では、両面にわずかなマージンしかありません(11px)。それでも991pxの幅で120pxの余白があり、画面の不動産の25%近くが両面に余白があることを意味します。これは私には分かりません。これが行われた理由はありますか?物を壊さずに特定の容器の幅を好むというこの動作を削除できますか?

+1

[関連](http://stackoverflow.com/questions/9780333/fluid-or-fixed-grid-system-in-responsive-design-based-on-twitter-bootstrap)?それは私と同じ問題のように聞こえる。 –

+0

これは重要ではありません。画面の幅が992px/991pxのデバイスは見つからないため、CSSはiPadやスマートフォンのような一般的なデバイスの幅に設定されています。もちろん、ブラウザの幅(ドラッグ)に合わせてオリジナルを独自のCSSに置き換えることもできますが、あなたが行ったことはパッド/スマートフォンデバイスでの動作には影響しません。 – Kooki3

+2

画面の幅が992px/991pxのデバイスは見つけるのが難しいですが、画面の解像度を上げてブラウザを最大化しないと、このような状況になることは少し難しいでしょう。 –

答えて

30

ブートストラップの人々からの公式の回答:

それはつまるところ何が特定のブレークポイントのために設計する無制限、未知の大きさのために設計するよりも(私の心の中で) が容易であるということです。 あなたが言及する代わりに間違っているか悪い、ちょうど異なっている。私はむしろ 非常に特定の範囲の層を維持しています。

+22

私は '.container {width:auto; } 'を修正する – Dorian

+20

http://getbootstrap.com/css/#grid-options 一番外側の.containerを.container-fluidに変更することにより、固定幅グリッドレイアウトを全幅レイアウトに変更できます。 – chilltemp

+0

これは右マージンを変更しません – user3799365

2

これは、ブートストラップとそのグリッドが動作する方法です。ブートストラップは4グリッドを定義します(this table参照)。画面サイズに応じて、これらの4つのグリッドの1つが使用されます。 992px画面幅は、小さいグリッドと中間のグリッドのブレークポイントです。

グリッドが水平に収まり、垂直にスクロールしますas we are used to。このため、小さなグリッドが992px以下に適用されます。

コンテナの最大幅は、どの幅に12等分幅の列とガターを含むことができるかを調べることで「計算」できます。小さなグリッドの場合、12 x 60は、列の両側に15ピクセルの720. The padding is constructedを作成し、グリッドの外側で2 x 15ピクセルを引いたものです。欠落したピクセル(負のマージンで構成)は、720 +(2 x 15)= 750となります。

750 pxは991pxに対して非常に小さいようです。小さなグリッドは、スクリーン幅768pxのデバイスと画面幅992pxの中グリッドでの使用を目的としています。

2

これは、固定幅+マージン=ブレークポイントが原因です。ブートストラップでは、コンテナが固定幅のままである間にマージンが拡大します。ブラウザがブレークポイントを超えてサイズ変更されると、コンテナはブレークポイントのすぐ下にジャンプします。

関連する問題