如何针对桌面和移动视图以不同的方式重新排序 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中文网其他相关文章！