問題タブ [grid-system]

Safari 6 では flexbox が部分的にサポートされていると読みましたが、何が欠けているのか正確にはわかりません。

私の目標は、固定サイド カラムと液体カラムが混在する可能性のあるグリッドを作成することです。

例えば：

| 256px fixed width | this column has width:100% and spans rest of space |

これは、最新の安定した Chrome、FF、Opera、IE10 で動作する例です。残念ながら、これは Safari 6 では失敗しますが、これはフレックスボックスのものを完全に無視しているようです。

それを機能させるためにできるCSSの微調整、または代替手段はありますか？

デモ/コード: http://dominictobias.com/grid/with-fixed.html (< 767px スタックします。これは、液体カラムと固定カラムを混合するときにフレックスなしでは実現できません)

CSS:

html:

新しい Bootstrap 3 グリッド システムは優れています。すべての画面サイズでのレスポンシブ デザインではより強力で、ネストされたデザインでははるかに簡単です。

しかし、私には理解できなかった問題が1つあります。列の間に正確なギャップを追加するにはどうすればよいですか? コンテナーが 960px、310px に 3 列、3 列の間に 15px に 2 つのガターがあるとします。それ、どうやったら出来るの？

このグリッドシステムを使用しました。しかし、幅がほぼ1000pxになりました。その960pxのサイズを変更したいのですが、方法がわかりません。body{width:960px; も指定しようとしました。margin:auto;} しかし、今回はレスポンシビティの主なアイデアに負けました..

Web サイトで Bootstraps を使用していますが、Internet Explorer は Bootstraps のグリッド システムを使用していないようです。class="col-sm-6 col-md-4 col-md-offset-4" が割り当てられたクラスがありますが、Internet Explorer 11 では画面全体に広がっています。これが問題の画像ですhttp://wikicopy.com/loginproblemIE.png背景が画面全体に広がっています。Firefox、Chrome、および Safari で正常に動作します。

まったくハッキングせずにグリッドを利用する良い方法を見つけようとしています。

私がやりたいのはsmall-4、一番上の行に 3 つの幅のグリッド (それぞれに別名) があり、2 番目の行では列を一致させたいのですが、small-4要素は 2 つだけです。

通常、答えは1つを実行してから1つ実行することですsmall-4がsmall-8、入力がwidth: 100%これに設定されているため、うまくいきません。

これを箱から出して行う方法はありますか？オフセットについては知っていますが、それは右に移動するように設定されたアイテムに対してのみ機能します。

現時点では、2 つsmall-4の div で右の div が右に浮いており、上の div と一致していません。さらに追加することもできsmall-4ますが、これについてはベスト プラクティスに従いたいと思います。

ここに私のコードがあるので、私が何を意味するかを見ることができます：

20px以下1emのグリッドシステムのガターを作成する方法を知っている人はいますか?

すべてのdivs を一列に並べましたが、各 div の間にガターを追加する方法を知りたいです。グリッドの作り方を学ぶためにこれをやっています。jsFiddle ここに .

HTML: