モバイルファーストレイアウト用にブートストラップ 3 列を並べ替える方法

モバイル レイアウトでのブートストラップ 3 列の並べ替え

問題:

レスポンシブ レイアウトには、固定上部ナビゲーションバーと 2 つの列が含まれていますその下にサイドバーとメインコンテンツがあります。レイアウトはデスクトップでは期待どおりに機能しますが、モバイル デバイスでは、サイドバーがメイン コンテンツの上に重なって、望ましくない位置に配置されます。モバイルでの望ましい順序は、メイン コンテンツが最初に表示され、その後にサイドバーが続くことです。

答え:

ブートストラップでは、モバイルで列の順序を直接変更することはできません。 3. ただし、回避策は、ブートストラップの応答性の高い列の並べ替え機能を利用することです。

手順:

1. メイン コンテンツを最初に配置して、HTML 内の列の順序を並べ替えます:

<div class="col-lg-9 col-lg-push-3">...</div>
<div class="col-lg-3 col-lg-pull-9">...</div>

2. デフォルトでは、これらのクラスはモバイルでもメイン コンテンツを最初に表示します。
3. クラス Col-lg-push-3 はメイン コンテンツを 3 列右にプッシュし、col-lg-pull-9 はサイドバーを 9 列左にプルします。その結果、デバイス上で望ましい順序が得られます。大画面。

説明:

ブートストラップでは、列を特定の画面サイズに合わせて、col-push およびcol-pull を使用して位置を変更します。大きな画面でcol-lg-pushとcol-lg-pullを使用すると、列はそれらの画面で指定された順序を想定し、小さなデバイスでは元の順序を維持します。

以上がモバイルファーストレイアウト用にブートストラップ 3 列を並べ替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。