プッシュ/プル ブートストラップ 3 列を使用して、小さな画面用に異なるレイアウトを作成する方法

小さい画面のみで 3 列をプッシュ/プル ブートストラップする

レスポンシブ デザインの領域では、レイアウトを変更することが望ましい場合があります。画面サイズに基づいた要素。 Bootstrap 3 は、列の順序と位置を動的に調整するためのプッシュ ユーティリティとプル ユーティリティを提供します。

そのようなケースの 1 つは、大きなデスクトップでは元のレイアウトを維持しながら、小さな画面では異なる列の配置を維持したい場合です。次の例を考えてみましょう:

初期レイアウト:

<code class="html"><div class="col-lg-3">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">5</div></code>

小さい画面での希望のレイアウト:

<code class="html"><div class="col-xs-6">1</div>
<div class="col-xs-6">5</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div></code>

解決策:

このレイアウトを実現するには、次のアプローチを利用できます:

<code class="html"><div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div></code>

このソリューションでは、列の順序と位置を小さいものに設定することで、モバイル レイアウトを優先します。スクリーン。次に、大きなデスクトップでは、プッシュ ユーティリティとプル ユーティリティを適用して列を目的のデスクトップ レイアウトに再配置します。

このアプローチにより、目的の列の配置を維持しながら、さまざまな画面サイズに適応する柔軟で応答性の高いレイアウトが可能になります。

以上がプッシュ/プル ブートストラップ 3 列を使用して、小さな画面用に異なるレイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。