本文详细阐述了在bootstrap 3框架中，如何通过引入flexbox布局实现列等高效果。由于bootstrap 3的栅格系统并非原生基于flexbox，因此需要巧妙地应用`display: flex`和`flex: 1 0 auto`等css属性，将`row`和`col`元素及其内部内容转换为flex容器和flex项目，从而确保所有列的高度能够自动拉伸对齐，解决视觉对齐和阴影效果的显示问题。
理解Bootstrap 3列等高挑战
Bootstrap 3的栅格系统基于浮动（float）实现，其列（col-md-X）默认情况下会根据其内部内容的多少来决定自身高度。当同一行（row）中的不同列内容长度不一时，就会出现高度不一致的情况。这对于需要边框、背景或阴影等视觉元素对齐的布局来说，是一个常见的挑战。传统的解决方案（如使用负外边距、JavaScript计算高度等）往往增加复杂性或存在兼容性问题。
Flexbox：解决列等高的现代方法
尽管Bootstrap 3并非原生支持Flexbox，但我们可以通过自定义CSS引入Flexbox特性，以实现列等高。Flexbox（弹性盒子）布局模型的核心优势在于其能够轻松地控制容器内项目的对齐、方向和尺寸，特别是其默认的stretch行为，可以使Flex项目自动拉伸以填充其Flex容器的高度。
核心Flexbox概念回顾
- Flex容器（Flex Container）：应用display: flex的元素。它定义了一个Flex布局上下文。
- Flex项目（Flex Item）：Flex容器的直接子元素。Flex项目默认会尝试拉伸以匹配Flex容器的高度。
-
flex: 1 0 auto：这是flex-grow、flex-shrink和flex-basis的简写。
- flex-grow: 1：允许项目在必要时增长，占用可用空间。
- flex-shrink: 0：防止项目收缩，保持其内容尺寸。
- flex-basis: auto：项目的初始大小由其内容决定。 当应用于Flex项目时，它通常意味着项目将填充所有可用空间并保持其内容尺寸的灵活性。
在Bootstrap 3中应用Flexbox实现列等高
要使Bootstrap 3的列等高，我们需要将div.row作为Flex容器，并将其直接子元素（即div.col-md-X）作为Flex项目。关键在于，Flexbox的“拉伸”特性只作用于其直接子元素。如果列内部还有嵌套的元素也需要等高，那么该列本身也需要成为一个Flex容器，而其内部的子元素则成为该列的Flex项目。
步骤一：定义自定义Flexbox CSS类
首先，在您的样式表中添加以下CSS规则：
/* 自定义Flexbox类 */
.d-flex {
display: 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;
}- .d-flex 类将任何元素转换为Flex容器。
- .d-flex-item 类应用于Flex容器的直接子元素，使其能够填充可用高度。
步骤二：修改HTML结构以应用Flexbox类
接下来，根据Flexbox的嵌套特性，将这些类应用到您的Bootstrap栅格结构中。
考虑以下原始HTML结构片段：
<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容器：为其添加 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容器（添加 d-flex），而 div.info 则成为其Flex项目（添加 d-flex-item）。
- div.col-md-7 内部的 form 元素如果需要填充 col-md-7 的高度，也需要类似处理。在示例中，form 元素本身就包含了所有内容，因此 col-md-7 只需要作为Flex项目即可。
修改后的HTML示例：
<section id="contact" class="contact">
<div class="container">
<div class="section-title">
<h2>CONTACT</h2>
</div>
<!-- row 变为 Flex 容器 -->
<div class="row d-flex">
<!-- col-md-5 变为 Flex 项目，同时自身也作为 Flex 容器 -->
<div class="col-md-5 d-flex-item d-flex">
<!-- info 变为 col-md-5 的 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>
<!-- 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 加上 d-flex，使其成为Flex容器，其直接子元素 div.col-md-5 和 div.col-md-7 就会自动尝试拉伸高度。
- div.col-md-5 内部的 div.info 元素需要填充 col-md-5 的高度。因此，div.col-md-5 自身也需要被设置为 d-flex (作为容器)，而 div.info 则设置为 d-flex-item (作为项目)。这样，div.info 才能在其父级 col-md-5 内部拉伸。
- div.col-md-7 的 form 元素如果需要填充 col-md-7 的高度，同样需要将 col-md-7 设为 d-flex，将 form 设为 d-flex-item。在示例中，form 元素本身就包含了所有内容，因此 col-md-7 只需要作为Flex项目即可，其内部的 form 元素会自然地占据所需空间。如果 form 需要严格填充 col-md-7 的高度，则需要对其父级 col-md-7 也添加 d-flex，并对 form 添加 d-flex-item。
注意事项
- Flexbox的层级性：Flexbox的display: flex只对其直接子元素产生影响。如果需要更深层次的元素拉伸，就需要创建嵌套的Flex容器。
- height属性的覆盖：如果Flex项目被明确设置了height属性，它将覆盖Flexbox的默认拉伸行为。
- 浏览器兼容性：虽然现代浏览器对Flexbox的支持已经非常完善，但在支持Bootstrap 3的早期浏览器中（如IE9及以下），可能需要添加 -webkit- 等厂商前缀，甚至完全不兼容Flexbox。考虑到Bootstrap 3的发布时间，这通常不是问题。
- 避免过度使用：仅在确实需要等高布局的场景下使用Flexbox，避免不必要的复杂性。
总结
通过巧妙地在Bootstrap 3的栅格系统中引入自定义的Flexbox类，我们可以优雅地解决列等高这一常见布局难题。核心思想是将row作为Flex容器，将col作为Flex项目。对于需要其内部内容也等高拉伸的col，它本身也需要被声明为Flex容器，并将其直接子元素声明为Flex项目。这种方法提供了一种灵活且强大的方式来控制布局，确保视觉上的一致性和专业性。
