ホームページ >ウェブフロントエンド >CSSチュートリアル >デスクトップ ビューとモバイル ビューでブートストラップ列を異なる順序に並べ替えるにはどうすればよいですか?
ブートストラップ 4 では、デスクトップ ビューとモバイル ビューを切り替えるときに列の配置をカスタマイズするのが少し難しい場合があります。特定のシナリオに取り組んでみましょう。2 つの列と、右側の列にネストされた行があります。目標は、次のように表示されるようにレイアウトをレスポンシブにすることです:
デスクトップ バージョン:
--------- ------ | 2 || 1 | | || | | |------- | || 3 | | || | | |------- | | | | ---------
モバイル バージョン (順番に積み重ね):
-------- | 1 | | | -------- | 2 | | | | | | | | | | | -------- | 3 | | | --------
Bootstrap 4 のデフォルトのフレックスボックス レイアウトでは、列の高さが均等になります。目的のデスクトップ レイアウトを実現するには、大画面のフレックスボックスを無効にし、代わりにフロートを使用します。
<div class="container"> <div class="row d-flex d-lg-block"> <div class="col-lg-8 order-1 float-left"> <div class="card card-body tall">2</div> </div> <div class="col-lg-4 order-0 float-left"> <div class="card card-body">1</div> </div> <div class="col-lg-4 order-1 float-left"> <div class="card card-body">3</div> </div> </div> </div>
あるいは、w を利用するフレックスボックス ラッピング ハックを採用することもできます。 -auto:
<div class="container"> <div class="row"> <div class="col-lg-8 order-1"> <div class="card card-body">2</div> </div> <div class="col-lg-4 order-0"> <div class="card card-body w-auto">1</div> </div> <div class="col-lg-4 order-1"> <div class="card card-body w-auto">3</div> </div> </div> </div>
両方アプローチにはそれぞれ長所と短所があります。 float メソッドはより簡単ですが、位置合わせと応答性に問題が発生する可能性があります。ラッピング ハックにより応答性は向上しますが、より複雑な CSS が必要になります。
以上がデスクトップ ビューとモバイル ビューでブートストラップ列を異なる順序に並べ替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。