深入理解 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 类：

1. .d-flex: 用于将元素设置为 Flex 容器。
2. .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 结构片段：

无限画

千库网旗下AI绘画创作平台

下载

<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 实现复杂且视觉上一致的等高列布局，从而提升页面的专业性和用户体验。