Twitter Bootstrapに基づくレスポンシブデザインの流動または固定グリッドシステム

Twitterブートストラップグリッドのさまざまなオプションと、それらがどのように連携するかについて、混乱しています。

まず、通常のcontainer、またはを固定できますcontainer-fluid。

次に、どちらも通常のrow行または流動的な行のいずれかを含めることができますrow-fluid。つまり、流動的な列を持つ固定コンテナ、または固定された列を持つコンテナ-流体...

その上に、「レスポンシブ」メディアクエリを含めるかどうかを指定できます。

私はこれらのものがどのように相互作用するかについて混乱しています。しかし、1つの明白な例から始めましょう。

上の例のページ自体、両方の一例として提示しているものがあります固定グリッドと流体グリッド

ただし、私のブラウザでは、そのサンプルページ自体で、両方のグリッドが同じように動作します。サンプルページがオプションのレスポンシブメディアクエリを使用しているためでしょうか？では、両方の私は徐々に私のブラウザウィンドウを狭める開始した場合、グリッドの例としては、グリッド要素がないではない徐々に狭く取得-特定の（応答）境界幅が到達すると、彼らはより小さなサイズに、そして再び、さらに境界幅でスナップ。しかし、通常の「固定」の例と「流体」の例はどちらもここではまったく同じように動作します。つまり、違いは何ですか。

固定幅と流動幅のどちらを使用するかを決定するときは、ページ全体について考える必要があります。通常、どちらか一方を選択しますが、両方は選択しません。質問に挙げた例は、実際には同じ固定幅のページにあります。つまり、Scaffoldingページは固定幅レイアウトを使用しています。足場ページの固定グリッドと流動グリッドは例ではなく、固定幅と流動幅のレイアウトを実装するためのドキュメントです。

適切な固定幅の例はこちらです。適切な流体幅の例はこちらです。

固定幅の例を確認すると、ブラウザの幅が960pxより大きい場合、コンテンツのサイズが変化することはありません。これは、ページの最大（固定）幅です。固定幅デザインのメディアクエリは、特定のスタイルの最小幅を指定します。ブラウザウィンドウを縮小し、レイアウトが別のサイズにスナップするのを確認すると、この動作がわかります。

逆に、流動的な幅のレイアウトは、ブラウザウィンドウの幅に関係なく、常にブラウザウィンドウに合わせて伸縮します。メディアクエリはスタイルがいつ変更されるかを示しますが、コンテナーの幅は常に（固定数のピクセルではなく）ブラウザーウィンドウのパーセンテージです。

「レスポンシブ」メディアクエリはすべて準備が整っています。ページに固定幅レイアウトと流動幅レイアウトのどちらを使用するかを決定する必要があるだけです。

以前は、ブートストラップ2ではrow-fluid、流体コンテナーrow内と固定コンテナー内で使用する必要がありました。ブートストラップ3の導入により、row-fluid削除されました。今後は使用しないでください。

編集：コメントに従って、いくつかのjsFiddles：

• 流動的な非応答レイアウト、
• 流体応答レイアウト、
• 固定非応答レイアウト、
• レスポンシブレイアウトを修正しました。

これらのフィドルは、純粋なCSSメディアクエリに基づいて完全にBootstrapフリーであり、Twitter Bootstrapを使用せずに同様のソリューションを作成したいと考えるすべての人にとって、それらを出発点として最適です。

興味深い議論。私もこの質問をしていました。流動的と固定の主な違いは、固定レイアウトの幅がWebサイト（ビューポート）のレイアウト全体で固定されていることです。960px幅のビューポートがある場合、各列には固定幅があり、変更されることはありません。

流動的なレイアウトの動作は異なります。メインレイアウトの幅を100％の幅に設定したとします。これで、各列は相対的なサイズ（つまり25％）とブラウザーにサイズ変更されるときの縞にのみ計算されます。したがって、レイアウトの目的に基づいて、レイアウトの動作を選択できます。

ここでは、流体とフレックスについての良い記事です。

ソース-http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

長所

• 固定幅のレイアウトは、デザインの点ではるかに使いやすく、カスタマイズも簡単です。
• 幅はすべてのブラウザーで同じであるため、固定幅の画像、フォーム、ビデオ、およびその他のコンテンツの煩わしさが軽減されます。
• いずれにしてもすべてのブラウザでサポートされているわけではないmin-widthやmax-widthは必要ありません。
• Webサイトが最小の画面解像度である800x600に対応するように設計されている場合でも、コンテンツは大きな解像度でも十分に広く、読みやすくなっています。

短所

• 固定幅のレイアウトでは、画面解像度が大きいユーザーに余計な余白ができるため、「神の比率」、「三分の一の規則」、全体的なバランス、およびその他の設計原則が混乱します。
• 画面解像度を小さくすると、固定レイアウトの幅によっては、水平スクロールバーが必要になる場合があります。
• 解像度の高いものに対応するには、シームレスなテクスチャ、パターン、画像の継続が必要です。
• 固定幅のレイアウトは、一般的に、使いやすさに関しては全体的なスコアが低くなります。

Bootstrap 3の流動的なレイアウト。

Boostrap 2とは異なり、Bootstrap 3には、流体コンテナーを作成するための.container-fluid mixinがありません。.containerは、固定幅のレスポンシブグリッドレイアウトです。大きな画面では、Webページのコンテンツの両側に余白があります。

container-fluid Bootstrap 3.1に追加されました

滑らかなグリッドレイアウトはすべての画面幅を使用し、大画面でより効果的に機能します。Bootstrap 3のミックスインを使用すると、滑らかなグリッドレイアウトを簡単に作成できることがわかります。次の行は、滑らかなレスポンシブグリッドレイアウトを作成します。

.container-fixed;

.container-fixedミックスインは、コンテンツを画面の中央に設定し、パディングを追加します。固定ページ幅は指定していません。

別のアプローチは、Eric FlowersのCSSスタイルを使用することです

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

あなたはこれを使うかもしれません-https : //github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid。見てください..これは本当にとても便利だと思いました。優れたパフォーマンス、非常に軽量、すべての重要なブラウザー対応で流動的であるため、グリッドのブートストラップは実際には必要ありません。