Bootstrap 4 を使用して、デスクトップ上で 1 つの高い Div を 2 つの短い Div の横に配置し、モバイル上でスタックする方法は?

デスクトップでは 2 つの短い Div の隣に 1 つの高い Div があり、Bootstrap 4 を使用してモバイルではスタックされています

問題:

あなたWeb ページ上に 3 つの div を配置して、デスクトップ画面に並べて重ねて表示したいモバイルデバイス。最初の div (A) は、他の 2 つ (B および C) よりも高くする必要があります。

Solution:

Bootstrap 4 を使用してこのレイアウトを実現するには、以下を行う必要があります。大きな画面では flexbox プロパティを無効にし、float を使用して短い div (B および C) を自然に右に引っ張ります。方法は次のとおりです:

1. container-fluid クラスと row クラスをそれぞれ使用してコンテナと行を作成します。
2. モバイル応答性のために d-flex クラスを行に追加します。
>

3. 行内に 3 つの列を作成します:

   • Div A: Col-lg-6 order-1 float-left クラスを与えます。この列は他の列よりも高くなります。
   • Div B: それに、col-lg-6 order-0 float-left クラスを与えます。この列は右に引っ張られます。
   • Div C: それに、col-lg-6 order-1 float-left クラスを与えます。この列は Div A の下、Div B の右側に配置されます。

更新されたコード スニペットは次のとおりです:

<div class="container-fluid">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-6 order-1 float-left">
            A
        </div>
        <div class="col-lg-6 order-0 float-left">
            B
        </div>
        <div class="col-lg-6 order-1 float-left">
            C
        </div>
    </div>
</div>

フレックスボックスを無効にすることにより画面が大きく、フロートを使用する場合は、Div A が Div B および C よりも高く、3 つの div が配置されるレイアウトを作成できます。モバイルデバイス上に積み重ねられます。

以上がBootstrap 4 を使用して、デスクトップ上で 1 つの高い Div を 2 つの短い Div の横に配置し、モバイル上でスタックする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。