モバイル レイアウト用に Bootstrap 3 列を並べ替えるにはどうすればよいですか?

Bootstrap 3 モバイル レイアウトの列の並べ替えを実現

Bootstrap は、応答性の高いレイアウトを作成するための強力なグリッド システムを提供します。ただし、モバイル レイアウトの列の順序を明示的に変更する機能はありません。この記事では、列の並べ替えを実現する別のアプローチについて説明します。

問題:

ユーザーは、上部のナビゲーションバーと 2 つの列 (サイドバーとコンテンツ) を備えたレスポンシブ レイアウトを作成しています。画面のサイズがモバイル レイアウトに変更されると、サイドバーはコンテンツの真下に表示されるのではなく、コンテンツの上に重ねて表示されます。目標は、モバイル上の列の順序を並べ替えて、メイン コンテンツが一番上になるようにすることです。

解決策:

列を直接変更することはできません。モバイル画面の注文には、プッシュ クラスとプル クラスを使用する回避策があります。

コード説明:

メイン コンテンツを優先するには、列の順序を次のように変更します。

<!-- Main Content (Pushed 3 columns to the right on large screens) -->
<div class="col-lg-9 col-lg-push-3">...</div>

<!-- Sidebar (Pulled 9 columns to the left on large screens) -->
<div class="col-lg-3 col-lg-pull-9">...</div>

この変更により、メイン コンテンツが 3 列分右に移動し、サイドバーが表示されます。大きな画面では 9 列左に移動します。ただし、小さい画面では、デフォルトの列順序は変更されず、メイン コンテンツが上部に希望のレイアウトになります。

サイドバーに関する追加の考慮事項:

展開するナビゲーションバー内にサイドバーを表示する場合は、次の点を考慮してください:

• メニューを展開してコンテンツを垂直方向に積み重ねる代わりに、
• デフォルトではサイドバーを非表示にし、メニューのアクティブ化時に JavaScript を使用して表示します。

結論:

プッシュとプルの使用クラスを使用すると、大画面用に列を効果的に並べ替えることができます。より複雑な列レイアウトやモバイルでの並べ替えについては、レスポンシブ グリッドや CSS フレックスボックスなどの代替ソリューションを検討してください。

以上がモバイル レイアウト用に Bootstrap 3 列を並べ替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。