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 结构：
CONTACT
........................
详细应用说明：
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 更具性能优势和维护便利性。
以上就是在 Bootstrap 3 中使用 Flexbox 实现列等高布局的专业指南的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1602076.html
微信扫一扫 
支付宝扫一扫 
