如何使用 Bootstrap 4 在桌面上將一個較高的 Div 排列在兩個較短的 Div 旁邊並在行動裝置上堆疊它們？

桌面上一個較高的Div 緊鄰兩個較短的Div，並使用Bootstrap 4 在行動裝置上堆疊

問題：問題

問題

：問題

問題

：問題

1. 問題
：
2. 您想要在網頁上排列三個div，以便它們在桌面螢幕上並排顯示並在行動裝置上堆疊顯示裝置。第一個 div (A) 應比其他兩個（B 和 C）高。

3. 解決方案
   :
   • 要使用Bootstrap 4 實現此佈局，您需要在較大的螢幕上停用flexbox 屬性，並使用浮動自然地將較短的div（B 和C）拉到右側。操作方法如下：
   • 分別使用容器流體和行類別建立一個容器和一行。
   向行添加 d-flex 類別以實現移動響應能力。

在行內建立三列：

<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：給它 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 A 比Div B 和C 高，且三個div 位於堆疊在行動裝置上。

以上是如何使用 Bootstrap 4 在桌面上將一個較高的 Div 排列在兩個較短的 Div 旁邊並在行動裝置上堆疊它們？的詳細內容。更多資訊請關注PHP中文網其他相關文章！