bootstrap 3 默认的栅格系统不支持列等高，导致内容长度不一致时出现布局错位。本教程将详细介绍如何通过引入自定义 flexbox css 类，巧妙地将 row 和 col 元素转换为 flex 容器和 flex 项目，从而实现列内容的自动拉伸对齐，有效解决边框和阴影的视觉不一致问题，提升页面布局的专业性和美观度。
引言：Bootstrap 3 列等高挑战
在网页设计中，当使用 Bootstrap 3 栅格系统构建多列布局时，如果各列内容的高度不一致，通常会导致列的底部不对齐。这不仅影响视觉美观，还会导致诸如边框、背景或阴影等样式出现断裂，尤其是在需要列之间有明确视觉边界的场景下。虽然 Bootstrap 3 本身并未内置 Flexbox 支持来解决这一问题，但我们可以通过自定义 CSS 引入 Flexbox 属性，巧妙地实现列的等高对齐。
理解 Flexbox 与其在 Bootstrap 3 中的应用
Flexbox (弹性盒子布局) 是一种一维布局模型，它能够让容器中的项目沿着主轴或交叉轴进行对齐、分布空间。其核心特性之一是子元素可以自动拉伸以填充其父容器的高度。在 Bootstrap 3 环境下，尽管其核心 CSS 不依赖 Flexbox，我们依然可以手动为其栅格元素添加 Flexbox 行为。
实现列等高的关键在于：
- 将 div.row 元素设置为 Flex 容器。
- 将 div.col-md-X 元素设置为其父容器 div.row 的 Flex 项目。
- 如果 div.col-md-X 内部还有需要拉伸的子元素（例如包裹内容的 div.info 或 form），那么 div.col-md-X 本身也需要成为一个 Flex 容器，同时其内部子元素成为 Flex 项目。
这种层层嵌套的 Flexbox 应用，确保了从最外层到最内层的内容都能根据需要自动拉伸高度。
定义核心 Flexbox CSS 类
为了方便管理和应用，我们定义两个简单的 CSS 类：
- .d-flex: 用于将元素定义为 Flex 容器。
- .d-flex-item: 用于将元素定义为 Flex 项目，并使其能够填充可用空间。
/* 现有样式保持不变，例如： */
.contact .info {
padding: 30px;
background: #fff;
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 40px; /* 注意：这个 margin-bottom 会影响父容器的高度，如果需要精确等高，可能需要调整 */
}
.contact .php-email-form {
padding: 30px;
background: #fff;
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 40px; /* 同上 */
}
/* 自定义 Flexbox CSS 类 */
.d-flex {
display: flex;
}
.d-flex-item {
/* flex: <flex-grow> <flex-shrink> <flex-basis>; */
/* 1 0 auto 表示允许项目放大，不允许缩小，初始大小根据内容决定 */
flex: 1 0 auto;
}flex: 1 0 auto; 解释:
- flex-grow: 1: 允许 Flex 项目在必要时放大，以占据 Flex 容器中的额外空间。
- flex-shrink: 0: 不允许 Flex 项目缩小。
- flex-basis: auto: Flex 项目的初始主尺寸，由其内容或宽度/高度属性决定。结合 flex-grow: 1，它能确保项目在不缩小的情况下，尽可能拉伸以填充容器。
在 HTML 结构中应用 Flexbox 类
现在，我们将这些自定义的 Flexbox 类应用到现有的 Bootstrap 栅格结构中。关键在于理解 Flexbox 的作用范围是“一层深”：一个 Flex 容器只影响其直接子元素。因此，我们需要根据布局的深度，在适当的层级应用 d-flex 和 d-flex-item。
考虑以下原始的 Bootstrap 3 结构片段：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
<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>为了实现等高，我们需要进行如下修改：
- div.row: 设为 Flex 容器。
- div.col-md-5 和 div.col-md-7: 设为 div.row 的 Flex 项目。
- div.col-md-5: 自身也需设为 Flex 容器，因为它的子元素 div.info 需要拉伸。
- div.info: 设为 div.col-md-5 的 Flex 项目。
- form.php-email-form: 设为 div.col-md-7 的 Flex 项目。
修改后的 HTML 结构如下：
<section id="contact" class="contact">
<div class="container">
<div class="section-title">
<h2>CONTACT</h2>
</div>
<!-- 1. div.row 设为 Flex 容器 -->
<div class="row d-flex">
<!-- 2. div.col-md-5 设为 Flex 项目，并作为 Flex 容器 -->
<div class="col-md-5 d-flex-item d-flex">
<!-- 3. div.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. div.col-md-7 设为 Flex 项目 -->
<div class="col-md-7 d-flex-item">
<!-- 5. form.php-email-form 设为 Flex 项目 -->
<form action="forms/contact.php" method="post" role="form" class="php-email-form d-flex-item">
<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>
<div class="row">
<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>
<div class="form-group">
<label for="name">T</label>
<input type="text" class="form-control" name="subject" id="subject" required>
</div>
<div class="form-group">
<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>
<div class="text-center"><button type="submit">Send</button></div>
</form>
</div>
</div>
</div>
</section>注意事项与总结
- **引入 Bootstrap
