さまざまなオプションについて混乱していますツイッター ブートストラップ グリッド、そしてそれらがどのように組み合わされるかについて説明します。
まず、通常の固定container、または を持つことができますcontainer-fluid。
すると、どちらにも通常のrowまたは流動的な行 のいずれかを含めることができますrow-fluid。つまり、流動的な行を持つ固定コンテナ、または固定行を持つ流動的なコンテナ... を持つことができるということですか?
さらに、レスポンシブなメディアクエリを含めることも、含めないこともできます。
これらがどのように相互作用するのか、混乱し始めています。まずは明らかな例から始めましょう。
の上例のページそれ自体は、両方の例として提示されている固定グリッドそして流動的なグリッド
しかし、私のブラウザのそのサンプル ページ自体では、両方のグリッドが同じように動作します。おそらく、サンプル ページがオプションのレスポンシブ メディア クエリを使用しているからでしょうか。両方のグリッド サンプルで、ブラウザ ウィンドウを徐々に狭め始めても、グリッド要素は徐々に狭くなりません。特定の (レスポンシブな) 境界幅に達すると、小さいサイズにスナップされ、さらに境界幅が広がると再びスナップされます。しかし、通常の「固定」サンプルと「流動」サンプルはどちらもここではまったく同じように動作します。では、いったい何が違うのでしょうか。
ベストアンサー1
固定幅と可変幅のどちらにするか決める際は、ページ全体について考える必要があります。一般的には、どちらか一方を選択することになりますが、両方を選択する必要はありません。質問で挙げた例は、実際には同じ固定幅のページにあります。言い換えれば、Scaffolding ページは固定幅レイアウトを使用しています。固定グリッドそして流動的なグリッドScaffolding ページのものは例ではなく、固定幅レイアウトと可変幅レイアウトを実装するためのドキュメントです。
適切な固定幅の例は次の通りです。ここ適切な流体幅の例はここ。
固定幅の例を見ると、ブラウザの幅が 960 ピクセルを超えると、コンテンツのサイズが変わるのが見えないはずです。これは、ページの最大 (固定) 幅です。固定幅デザインのメディア クエリは、特定のスタイルの最小幅を指定します。ブラウザ ウィンドウを縮小して、レイアウトが異なるサイズにスナップされるのを見ると、これが実際に確認できます。
逆に、流動幅レイアウトは、ブラウザ ウィンドウの幅がどれだけ広くなっても、常にブラウザ ウィンドウに合わせて伸縮します。メディア クエリはスタイルが変更されるタイミングを示しますが、コンテナーの幅は常にブラウザ ウィンドウのパーセンテージです (固定ピクセル数ではありません)。
「レスポンシブ」メディア クエリはすべて準備完了です。ページで固定幅レイアウトを使用するか、可変幅レイアウトを使用するかを決めるだけです。
以前の bootstrap 2 では、row-fluid流動コンテナ内とrow固定コンテナ内で を使用する必要がありました。 bootstrap 3 の導入により はrow-fluid削除されたため、使用しなくなりました。
編集: コメントに従って、いくつかのjsFiddles :
これらのフィドルは完全に Bootstrap フリーで、純粋な CSS メディア クエリに基づいているため、Twitter Bootstrap を使用せずに同様のソリューションを作成したい人にとっては良い出発点になります。