如何使用 Bootstrap 4 在桌面上将一个较高的 Div 排列在两个较短的 Div 旁边并在移动设备上堆叠它们？

桌面上一个高的 Div 紧邻两个较短的 Div，并使用 Bootstrap 4 在移动设备上堆叠

理解问题：

与引用的问题类似，此场景涉及从桌面切换到桌面时重新排序三个 div 移动的。在桌面上，这些 div 应并排排列，而在移动设备上，它们应垂直堆叠。提供的图像清楚地说明了所需的布局。

解决解决方案：

要实现此布局，我们必须针对较大宽度禁用 Bootstrap 4 的默认 Flexbox 行为。通过这样做，柱子的高度将不再受到限制。相反，我们可以使用 float 属性使 B 和 C 列自然向右对齐，因为 A 较高。

实现顺序：

重新排序在移动设备上的列中，我们利用 Bootstrap 4 提供的 order-utility 类：

• 桌面（更大width): A-B-C
• 移动设备：B-A-C

这是实现此方法的代码片段：

<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，提供桌面和移动设备上的特定布局。

以上是如何使用 Bootstrap 4 在桌面上将一个较高的 Div 排列在两个较短的 Div 旁边并在移动设备上堆叠它们？的详细内容。更多信息请关注PHP中文网其他相关文章！