Bootstrap中实现多列等高需将.row设为Flex布局：BS4加d-flex类，BS5默认即flex；子列默认align-items:stretch拉伸，避免固定高度干扰，注意内容溢出和图片尺寸控制。
用 flex 容器替代 row 默认的 display: block
bootstrap 本身不提供“多列等高”的开箱即用类，因为它的 .row 默认是 display: block，子项（.col-*）高度由内容决定，互不影响。想让同排的列等高，必须让父容器变成 flex 布局。
最直接的做法是给 .row 加上 d-flex 类，并确保子列没有设置 height 或 min-height 干扰伸缩行为：
<div class="row d-flex"> <div class="col-4">内容短</div> <div class="col-4">内容很长很长……</div> <div class="col-4">中等长度</div> </div>
-
d-flex让.row变成display: flex，子列默认按align-items: stretch拉伸等高 - 避免在列上写
style="height: 200px"或min-height，否则会破坏拉伸逻辑 - 如果列内有
.card等带边框/阴影的组件，注意border和box-shadow不影响高度计算，但 padding/margin 会影响视觉对齐
遇到 col 内容溢出或换行错位怎么办
Flex 下的 .col-* 默认是 flex: 0 1 auto，也就是“不放大、可缩小、按内容宽”。当内容超长（比如长单词、URL）或容器窄时，可能撑破布局或文字不换行。
- 加
word-break: break-word或overflow-wrap: break-word到列内文本容器（如<p></p>），避免单个长词顶开列宽 - 若需强制列等宽（非响应式比例），可用
flex: 1替代.col-*，例如：<div class="row d-flex"> <div class="flex-1">…</div> <div class="flex-1">…</div> </div> - 不要混用
.col-*和flex-1在同一行——它们的 flex 基础值不同，会导致宽度计算冲突
Bootstrap 4 和 5 的关键差异点
Bootstrap 4 的 .row 默认不是 Flex，必须显式加 d-flex；而 Bootstrap 5 的 .row 已默认是 display: flex，但前提是没被其他样式覆盖。
- BS5 中，只要没写
style="display: block"或加载了重置 CSS，.row就天然支持等高 —— 但很多人升级后仍手动加d-flex，反而引发嵌套 Flex 的意外行为 - BS4 必须加
d-flex，且要确认未引入旧版栅格 CSS（比如从 CDN 混用了 BS3 的 CSS 文件） - 两者都依赖
align-items: stretch，所以不要在.row上设align-items: flex-start，否则等高失效
为什么有时候加了 d-flex 还不等高
常见原因是列内部存在脱离文档流或固定高度的元素，导致 Flex 容器无法正确测量内容高度。
-
position: absolute的子元素不参与高度计算，会让所在列“看起来矮” - 图片没设
max-width: 100%或height: auto，可能撑高某列但不触发其他列同步拉伸（因图片加载异步，初始高度为 0） - 使用了
vh单位或min-height: 100vh的卡片，在视口变化时可能造成列高不一致 - JavaScript 动态插入内容后未触发重排（罕见），可临时加
row.offsetHeight强制重绘
等高不是魔法，它只对 Flex 容器内“参与布局的高度”起作用。内容越不可控（比如富文本、第三方 embed），越需要提前约束尺寸和换行行为。
