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

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

问题：

您想要在网页上排列三个 div，以便它们在桌面屏幕上并排显示并在移动设备上堆叠显示。第一个 div (A) 应比其他两个（B 和 C）高。

解决方案:

要使用 Bootstrap 4 实现此布局，您需要在较大的屏幕上禁用 flexbox 属性，并使用浮动自然地将较短的 div（B 和 C）拉到右侧。操作方法如下：

1. 分别使用容器流体和行类创建一个容器和一行。
2. 向行添加 d-flex 类以实现移动响应能力。

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 高，并且三个 div 在移动设备上堆叠。

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