深入理解 Bootstrap 3 列等高：Flexbox 解决方案-html教程-PHP中文网

深入理解 Bootstrap 3 列等高：Flexbox 解决方案

DDD

发布： 2025-12-02 12:11:02

原创

364人浏览过

深入理解 Bootstrap 3 列等高：Flexbox 解决方案

本教程旨在解决 bootstrap 3 中列高不一致的常见布局问题。我们将利用 css flexbox 属性，通过定义自定义类并巧妙地应用于 html 结构，实现不同内容量列的等高显示。此方法无需 javascript，提供了一种纯 css 的解决方案，确保视觉对齐和布局美观。

Bootstrap 3 列等高问题概述

在 Bootstrap 3 的网格系统中，默认情况下，col-* 类所定义的列的高度会根据其内部内容的高度自适应。这意味着如果同一行中的不同列包含的内容量不同，它们的高度将不一致。这在需要对齐边框、背景或阴影效果的布局中会导致视觉上的不协调，例如，当您希望联系信息块和表单块在视觉上保持相同高度时。尽管 Bootstrap 4 及更高版本原生支持 Flexbox 以实现等高列，但在 Bootstrap 3 中，我们需要手动引入 Flexbox 样式来解决这一问题。

Flexbox 解决方案原理

Flexbox (弹性盒子) 布局模块是 CSS3 中一个强大的布局工具，它能够让容器中的项目（flex items）根据可用空间进行伸缩，并实现复杂的对齐方式。其中一个关键特性是，当容器设置为 display: flex 时，其直接子元素（flex items）默认会拉伸以填充容器的整个高度。

然而，需要注意的是，Flexbox 的这种拉伸行为只作用于“直接子元素”。这意味着，如果您的布局有多层嵌套，您可能需要在每个需要等高的层级上都应用 Flexbox 容器和项目样式。

为了在 Bootstrap 3 环境下实现列等高，我们将定义两个核心 CSS 类：

.d-flex: 用于将元素设置为 Flex 容器。
.d-flex-item: 用于将元素设置为 Flex 项目，并使其在容器中伸缩。

实现步骤与代码示例

1. 定义 Flexbox CSS 类

首先，在您的自定义 CSS 文件中添加以下 Flexbox 样式：

/* 现有样式保持不变 */
.contact .info {
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.contact .php-email-form {
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

/* Flexbox 辅助类 */
.d-flex {
  display: flex;
}

.d-flex-item {
  /* flex: 1 0 auto; 允许项目增长（1）、不收缩（0），并基于其内容尺寸（auto） */
  flex: 1 0 auto; 
}

登录后复制

这里，.d-flex 将元素变为 Flex 容器，使其子元素成为 Flex 项目。.d-flex-item 则确保该项目能够根据其父 Flex 容器的高度进行伸缩。flex: 1 0 auto 是 flex-grow, flex-shrink, flex-basis 的简写，表示项目可以增长以填充可用空间，但不缩小，并且其初始尺寸由内容决定。

2. 应用 Flexbox 类到 HTML 结构

接下来，我们需要将这些自定义的 Flexbox 类应用到您的 Bootstrap HTML 结构中。关键在于理解 Flexbox 的“一层深”原则。

考虑以下原始 HTML 结构片段：

bee餐饮点餐外卖小程序

bee餐饮点餐外卖小程序是针对餐饮行业推出的一套完整的餐饮解决方案，实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能，完美的使餐饮行业更高效便捷！功能演示：1、桌号管理登录后台，左侧菜单 “桌号管理”，添加并管理你的桌号信息，添加以后在列表你将可以看到 ID 和密钥，这两个数据用来生成桌子的二维码2、生成桌子二维码例如上面的ID为 308，密钥为 d3PiIY，那么现在去左侧菜单微信设置

查看详情

<div class="row">   
  <div class="col-md-5">
    <div class="info">...</div>
  </div>
  <div class="col-md-7">
    <form class="php-email-form">...</form>
  </div> 
</div>

登录后复制

为了使 col-md-5 和 col-md-7 等高，我们需要：

将它们的父元素 div.row 变为 Flex 容器 (.d-flex)。
将 div.col-md-5 和 div.col-md-7 变为 Flex 项目 (.d-flex-item)。

但是，如果 div.col-md-5 内部的 div.info 自身也需要填充 col-md-5 的整个高度（例如，为了使背景和阴影与列高一致），那么 div.col-md-5 自身也需要成为一个 Flex 容器，并且 div.info 需要成为它的 Flex 项目。

修改后的 HTML 结构如下：

<section id="contact" class="contact">
  <div class="container">
    <div class="section-title">
      <h2>CONTACT</h2>
    </div>

    <!-- 1. 将 .row 设为 Flex 容器 -->
    <div class="row d-flex">
      <!-- 2. col-md-5 设为 Flex 项目，同时自身也作为 Flex 容器 -->
      <div class="col-md-5 d-flex-item d-flex">
        <!-- 3. .info 设为 Flex 项目 -->
        <div class="info d-flex-item">
          <div class="email">
            <i class="bi bi-envelope"></i>
            <h4>Email:</h4>
            <p>email</p>
          </div>
          <div class="phone">
            <i class="bi bi-phone"></i>
            <h4>Telephone:</h4>
            <p>95 966 0</p>
          </div>
          <div class="address">
            <i class="bi bi-geo-alt"></i>
            <h4>Messenger:</h4>
            <p>address</p>
          </div>
          <div class="phone">
            <i class="bi bi-phone"></i>
            <h4>Whatsapp:</h4>
            <p>745 2720</p>
          </div>
          <div class="phone">
            <i class="bi bi-phone"></i>
            <h4>Telegram:</h4>
            <p>745 2720</p>
          </div>
        </div>
      </div>

      <!-- 4. col-md-7 设为 Flex 项目 -->
      <div class="col-md-7 d-flex-item">
        <form action="forms/contact.php" method="post" role="form" class="php-email-form">
          <div class="row">
            <div class="form-group col-md-6">
              <label for="name">N</label>
              <input type="text" name="name" class="form-control" id="name" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">Email</label>
              <input type="email" class="form-control" name="email" id="email" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">Mobile</label>
              <input type="text" class="form-control" name="subject" id="subject" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">F</label>
              <input type="text" class="form-control" name="subject" id="subject" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">T</label>
              <input type="text" class="form-control" name="subject" id="subject" required>
            </div>

            <div class="form-group col-md-6">
              <label for="name">U</label>
              <textarea class="form-control" name="message" rows="6" required></textarea>
            </div>
            <div class="err">
              <div class="processing">Loading</div>
              <div class="error-message"></div>
              <div class="sent-message">Your message has been sent.!</div>
              <div class="text-center"><button type="submit">Send</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

登录后复制

关键点解析：

div.row 成为 Flex 容器 (d-flex): 这使得其直接子元素 div.col-md-5 和 div.col-md-7 成为 Flex 项目。
div.col-md-5 和 div.col-md-7 成为 Flex 项目 (d-flex-item): 它们会拉伸以匹配 div.row 中最高列的高度。
div.col-md-5 再次成为 Flex 容器 (d-flex): 这是因为 div.info 需要填充 div.col-md-5 的高度。
div.info 成为 Flex 项目 (d-flex-item): 它会拉伸以填充其父容器 div.col-md-5 的高度。

通过这种多层 Flexbox 的应用，我们确保了从最外层的行到最内层的内容块都能实现等高效果。

注意事项与总结

兼容性: Flexbox 在现代浏览器中得到广泛支持。对于需要支持老旧浏览器的项目（如 IE 9 及以下），可能需要考虑回退方案或使用 JavaScript。
嵌套层级: 当您的布局嵌套较深时，请务必记住 Flexbox 的“直接子元素”原则，并根据需要为每一层级应用 d-flex 和 d-flex-item。
避免固定高度: 如果您希望 Flex 项目能够自适应拉伸，请避免对其设置固定的 height 属性，因为它会覆盖 Flexbox 的拉伸行为。
Bootstrap 版本: 此教程专注于 Bootstrap 3。在 Bootstrap 4 及更高版本中，Flexbox 已经原生集成到网格系统中，通常可以通过添加 .d-flex、.align-items-stretch 等实用类更简单地实现等高列。

通过上述方法，即使在 Bootstrap 3 环境下，我们也能有效地利用 Flexbox 实现复杂且视觉上一致的等高列布局，从而提升页面的专业性和用户体验。

以上就是深入理解 Bootstrap 3 列等高：Flexbox 解决方案的详细内容，更多请关注php中文网其它相关文章！