ホームページ >ウェブフロントエンド >CSSチュートリアル >モバイルファーストレイアウト用にブートストラップ 3 列を並べ替える方法
問題:
レスポンシブ レイアウトには、固定上部ナビゲーションバーと 2 つの列が含まれていますその下にサイドバーとメインコンテンツがあります。レイアウトはデスクトップでは期待どおりに機能しますが、モバイル デバイスでは、サイドバーがメイン コンテンツの上に重なって、望ましくない位置に配置されます。モバイルでの望ましい順序は、メイン コンテンツが最初に表示され、その後にサイドバーが続くことです。
答え:
ブートストラップでは、モバイルで列の順序を直接変更することはできません。 3. ただし、回避策は、ブートストラップの応答性の高い列の並べ替え機能を利用することです。
手順:
<div class="col-lg-9 col-lg-push-3">...</div> <div class="col-lg-3 col-lg-pull-9">...</div>
説明:
ブートストラップでは、列を特定の画面サイズに合わせて、col-push およびcol-pull を使用して位置を変更します。大きな画面でcol-lg-pushとcol-lg-pullを使用すると、列はそれらの画面で指定された順序を想定し、小さなデバイスでは元の順序を維持します。
以上がモバイルファーストレイアウト用にブートストラップ 3 列を並べ替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。