Bootstrap row -在小型设备上折叠时强制使用相同高度的div

Bootstrap是一个流行的前端开发框架，它提供了一套用于构建响应式和移动优先的网站和应用程序的工具。Bootstrap的row类用于创建网格系统，将页面划分为多个水平行。在小型设备上，row类可以自动折叠为垂直布局，以适应较小的屏幕。

当在小型设备上折叠时，如果希望row中的div元素具有相同的高度，可以使用Bootstrap的flexbox布局来实现。Flexbox是一种弹性盒子布局模型，可以轻松地控制元素在容器中的对齐方式、顺序和尺寸。

要在Bootstrap的row中强制使用相同高度的div，可以使用以下步骤：

1. 在row类的父容器上添加d-flex类，以启用flexbox布局。
2. 在row类的父容器上添加align-items-stretch类，以使每个div元素在垂直方向上拉伸，从而实现相同的高度。
3. 在每个div元素上添加col类，以定义每个列的宽度。

以下是一个示例代码：

<div class="container d-flex align-items-stretch">
  <div class="row">
    <div class="col">
      <!-- 第一个div内容 -->
    </div>
    <div class="col">
      <!-- 第二个div内容 -->
    </div>
    <div class="col">
      <!-- 第三个div内容 -->
    </div>
  </div>
</div>

在这个示例中，父容器使用了d-flex和align-items-stretch类，使每个div元素在垂直方向上拉伸。每个div元素使用col类定义了它们的宽度。

这种布局适用于需要在小型设备上保持相同高度的div元素，例如卡片式布局、产品列表等。

推荐的腾讯云相关产品和产品介绍链接地址：

• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务（TBC）：https://cloud.tencent.com/product/tbc