406

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

まず、通常の固定containerまたはcontainer-fluid.

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

その上に、「レスポンシブ」メディアクエリを含めることも含めないこともできます。

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

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

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

4

5 に答える 5

444

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

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

固定幅の例を見ると、ブラウザの幅が 960 ピクセルを超える場合、コンテンツのサイズが変化することはありません。これは、ページの最大 (固定) 幅です。固定幅デザインのメディア クエリは、特定のスタイルの最小幅を指定します。ブラウザ ウィンドウを縮小して、レイアウトが別のサイズにスナップされると、これが実際に行われていることがわかります。

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

「レスポンシブ」メディア クエリはすべて準備完了です。ページに固定幅レイアウトを使用するか、可変幅レイアウトを使用するかを決定する必要があります。

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

編集: コメントによると、いくつかのjsFiddles :

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

于 2012-03-27T20:31:00.613 に答える
21

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

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

これは、fluid と flex に関する良い記事です。

于 2012-09-07T20:43:16.477 に答える
-2

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

于 2015-11-16T07:46:07.040 に答える