如何針對桌面和行動視圖以不同的方式重新排序 Bootstrap 欄位？

在行動裝置上以不同順序堆疊Bootstrap 欄位

在Bootstrap 4 中，在桌面和行動視圖之間切換時自訂列的排列可能有點棘手。讓我們解決一個特定的場景：您有兩列，右列中有一個巢狀行。您的目標是讓版面具有響應性，使其顯示如下：

桌面版本：

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

行動版本（依序堆疊）：

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

使用浮動和停用Flexbox

Bootstrap 4 中的預設 Flexbox 版面配置可確保列的高度相等。若要實現所需的桌面佈局，您可以為大螢幕停用 Flexbox 並使用浮動：

<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>

使用 Flexbox Wrapping Hack

或者，您可以採用利用 w 的 Flexbox Wrapping Hack -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>

注意事項

兩種方法有各自的優點和缺點。浮動方法更簡單，但可能會導致對齊和響應能力問題。包裝駭客提供了更好的回應能力，但需要更複雜的 CSS。

其他資源

• [如何修正 bootstrap 4 中意外的列順序？ ](...)
• [Bootstrap 回應列高度](...)
• B-A-C -> A-B-C

以上是如何針對桌面和行動視圖以不同的方式重新排序 Bootstrap 欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！