デスクトップビューとモバイルビューでブートストラップ列を異なる順序に並べ替えるにはどうすればよいですか?-CSSチュートリアル-php.cn

デスクトップビューとモバイルビューでブートストラップ列を異なる順序に並べ替えるにはどうすればよいですか?

Susan Sarandon

リリース： 2024-12-07 12:22:12

オリジナル

426 人が閲覧しました

How to Reorder Bootstrap Columns Differently for Desktop and Mobile Views?

モバイルでブートストラップ列を異なる順序で積み重ねる

ブートストラップ 4 では、デスクトップビューとモバイルビューを切り替えるときに列の配置をカスタマイズするのが少し難しい場合があります。特定のシナリオに取り組んでみましょう。2 つの列と、右側の列にネストされた行があります。目標は、次のように表示されるようにレイアウトをレスポンシブにすることです:

デスクトップバージョン:

--------- ------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------

ログイン後にコピー

モバイルバージョン (順番に積み重ね):

--------
|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

ログイン後にコピー

フロートの使用と無効化Flexbox

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>

ログイン後にコピー