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) 提供了一种更高效的方式来布局、对齐和分配容器中项目空间。其核心在于：
- Flex 容器 (display: flex): 当一个元素被设置为 display: flex 时，它就成为了一个 Flex 容器，其直接子元素会变成 Flex 项目。
- Flex 项目默认拉伸: Flex 项目在默认情况下会尝试拉伸以填充其 Flex 容器的高度（在主轴为水平方向时）。
- 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。
考虑以下 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）都能实现等高对齐。
注意事项与总结
- Flexbox 兼容性: Bootstrap 3 发布时 Flexbox 尚未完全普及，因此需要确保目标浏览器对 Flexbox 有良好的支持。现代浏览器通常没有问题，但对于一些老旧浏览器，可能需要添加 -webkit-flex 等前缀。
- 层级深度: Flexbox 布局只作用于直接子元素。如果您的布局需要多层等高，则需要像示例中那样，将父元素设置为 d-flex，其子元素设置为 d-flex-item，如果子元素内部还有需要等高的子元素，该子元素也需再次设置为 d-flex，以此类推。
- height 属性的优先级: 如果在 Flex 项目上显式设置了 height CSS 属性，它将覆盖 Flexbox 默认的拉伸行为。因此，在应用 Flexbox 等高时，应避免对 Flex 项目设置固定的高度。
- margin-bottom 的影响: 示例中 contact .info 和 contact .php-email-form 都带有 margin-bottom: 40px;。在 Flexbox 布局中，外边距仍然会影响元素的实际占据空间，但不会影响 Flex 项目的拉伸行为本身。如果希望边框或背景延伸到外边距底部，可能需要调整设计或将外边距移到内部元素。
通过上述方法，即使在 Bootstrap 3 环境下，也能灵活且高效地利用 Flexbox 实现复杂的列等高布局，提升页面的视觉一致性和专业性。这种纯 CSS 的解决方案比依赖 JavaScript 更具性能优势和维护便利性。
