在 Bootstrap 3 中使用 Flexbox 实现列等高布局的专业指南

bootstrap 3 默认不支持 flexbox，但在处理列等高布局时，通过引入自定义 flexbox css 类，可以有效解决这一挑战。本文将详细指导如何利用 `display: flex` 和 `flex: 1 0 auto` 属性，为 `row` 和其内部 `col` 元素创建灵活的等高布局，确保复杂组件（如包含边框和阴影的卡片）在视觉上保持对齐和一致性，避免 javascript 依赖。

理解 Bootstrap 3 列等高挑战

Bootstrap 3 的网格系统基于浮动（float）布局，这使得在同一 row 中的 col 元素默认情况下高度不一致。每个 col 的高度由其内部内容决定，导致当内容长度不同时，视觉上会出现不对齐的情况，尤其是在需要统一边框、背景或阴影效果的场景中。虽然有多种解决方案（如使用 JavaScript 或表格布局），但引入 Flexbox 是一个更现代且纯 CSS 的方法，即使 Bootstrap 3 本身不原生支持。

Flexbox 解决方案核心原理

Flexbox (Flexible Box Layout Module) 提供了一种更高效的方式来布局、对齐和分配容器中项目空间。其核心在于：

1. Flex 容器 (display: flex): 当一个元素被设置为 display: flex 时，它就成为了一个 Flex 容器，其直接子元素会变成 Flex 项目。
2. Flex 项目默认拉伸: Flex 项目在默认情况下会尝试拉伸以填充其 Flex 容器的高度（在主轴为水平方向时）。
3. flex: 1 0 auto: 这是一个 Flex 简写属性，等同于 flex-grow: 1, flex-shrink: 0, flex-basis: auto。它允许项目在必要时增长 (flex-grow: 1)，但不收缩 (flex-shrink: 0)，并根据内容自动确定初始大小 (flex-basis: auto)。这对于确保 Flex 项目能够填满可用空间并保持等高至关重要。

实现步骤

为了在 Bootstrap 3 中实现列等高，我们需要定义两个自定义的 CSS 类：一个用于 Flex 容器，另一个用于 Flex 项目。

1. 定义自定义 Flexbox CSS 类

在您的样式表（例如 custom.css 或直接添加到现有 CSS 文件）中添加以下规则：

/* 自定义 Flexbox 类 */
.d-flex {
  display: flex;
  /* 兼容旧版浏览器，可根据需要添加 -webkit-flex 等前缀 */
  /* display: -webkit-flex; */
}

.d-flex-item {
  flex: 1 0 auto; /* 允许项目增长，不收缩，并根据内容确定初始大小 */
}

/* 现有样式（保持不变） */
.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;
}

2. 将 Flexbox 类应用于 HTML 结构

关键在于理解 Flexbox 的作用层级：display: flex 只影响其直接子元素。因此，为了使列内部的元素也等高，可能需要多层应用 Flexbox。

阿贝智能

阿贝智能是基于AI技术辅助创作儿童绘本、睡前故事和有声书的平台，助你创意实现、梦想成真。

63

查看详情

考虑以下 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">
          <!-- .info 内部的其他内容 -->
          <div class="email">...</div>
          <div class="phone">...</div>
          <div class="address">...</div>
          <div class="phone">...</div>
          <div class="phone">...</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>
          <div class="form-group">...</div>
          <div class="err">...</div>
          <div class="text-center"><button type="submit">Send</button></div>
        </form>
      </div>
    </div>
  </div>
</section>

详细应用说明：

• div.row: 添加 d-flex 类，使其成为一个 Flex 容器。这样，它的直接子元素（即 div.col-md-5 和 div.col-md-7）就会成为 Flex 项目，并默认拉伸到与最高的兄弟元素相同的高度。
• div.col-md-5:
  • 添加 d-flex-item，确保它作为 row 的子元素时能够拉伸。
  • 关键点: 如果 col-md-5 内部的 div.info 也需要拉伸以填充 col-md-5 的整个高度，那么 col-md-5 自身也需要被设置为 d-flex，使其成为一个新的 Flex 容器。
• div.info: 作为 col-md-5 的子元素，如果 col-md-5 被设置为 d-flex，那么 div.info 就需要添加 d-flex-item 来拉伸，从而填充 col-md-5 的高度。
• div.col-md-7: 添加 d-flex-item，确保它作为 row 的子元素时能够拉伸。由于其内部的 form 元素通常不需要填充整个高度（其自身内容决定高度），所以 col-md-7 不需要额外设置为 d-flex。

通过这种层层递进的 Flexbox 应用，可以确保从外部 row 到内部内容容器（如 .info 和 .php-email-form）都能实现等高对齐。

注意事项与总结

1. Flexbox 兼容性: Bootstrap 3 发布时 Flexbox 尚未完全普及，因此需要确保目标浏览器对 Flexbox 有良好的支持。现代浏览器通常没有问题，但对于一些老旧浏览器，可能需要添加 -webkit-flex 等前缀。
2. 层级深度: Flexbox 布局只作用于直接子元素。如果您的布局需要多层等高，则需要像示例中那样，将父元素设置为 d-flex，其子元素设置为 d-flex-item，如果子元素内部还有需要等高的子元素，该子元素也需再次设置为 d-flex，以此类推。
3. height 属性的优先级: 如果在 Flex 项目上显式设置了 height CSS 属性，它将覆盖 Flexbox 默认的拉伸行为。因此，在应用 Flexbox 等高时，应避免对 Flex 项目设置固定的高度。
4. margin-bottom 的影响: 示例中 contact .info 和 contact .php-email-form 都带有 margin-bottom: 40px;。在 Flexbox 布局中，外边距仍然会影响元素的实际占据空间，但不会影响 Flex 项目的拉伸行为本身。如果希望边框或背景延伸到外边距底部，可能需要调整设计或将外边距移到内部元素。

通过上述方法，即使在 Bootstrap 3 环境下，也能灵活且高效地利用 Flexbox 实现复杂的列等高布局，提升页面的视觉一致性和专业性。这种纯 CSS 的解决方案比依赖 JavaScript 更具性能优势和维护便利性。

以上就是在 Bootstrap 3 中使用 Flexbox 实现列等高布局的专业指南的详细内容，更多请关注php中文网其它相关文章！