用 row + col 配合 align-items-stretch 是最稳的方案：row 默认 display: flex 但 align-items 为 normal，需显式加 align-items-stretch 类；删掉 col 内 height:100% 等干扰样式；h-100 应加在 col 内部卡片等容器上而非 col 自身。
用 row + col 配合 align-items-stretch 是最稳的方案
Bootstrap 5 默认就支持等高列，但前提是父容器是 flex 布局且未被覆盖。很多人直接套 row 和 col 却发现两栏高度不一致，问题往往出在父级 row 没有正确触发 flex 对齐行为。
-
row默认是display: flex，但它的align-items默认值是normal（不是stretch），需显式加align-items-stretch类 - 如果列里用了
height: 100%或min-height，反而可能破坏 flex 的自然拉伸逻辑，建议删掉 - 避免在
col内部再嵌套row后忘记重置对齐方式——子row不继承父级align-items
示例：
<div class="row align-items-stretch"> <div class="col-md-6">内容短</div> <div class="col-md-6">内容很长，会撑开整行高度</div> </div>
当内容含图片或卡片时，h-100 必须加在每列内部容器上
单纯给 col 加 h-100 没用，因为 col 本身是 flex item，高度由内容决定；真正需要等高的，是它内部的卡片、div.card 这类块级容器。
- 常见错误：只写
<div class="col"><div class="card">...</div></div>，没给card加h-100 - 响应式场景下，
h-100在移动端可能让卡片过高，此时应配合d-md-flex或媒体查询控制 - 如果卡片内有
img-fluid，记得设object-fit: cover或固定宽高比，否则图片拉伸会导致高度不一致
正确写法：
<div class="row align-items-stretch">
<div class="col-md-6">
<div class="card h-100">...</div>
</div>
<div class="col-md-6">
<div class="card h-100">...</div>
</div>
</div>
遇到 min-height 或 padding 导致错位，优先检查 box-sizing
Bootstrap 的 col 默认用 box-sizing: border-box，但如果你在内部元素上手动加了 padding 或 border，又没配好 height 计算方式，两栏实际渲染高度就会差几个像素。
- 所有参与等高的容器（包括
card-body、container）都应确保box-sizing: border-box生效 - 避免在
col上直接设padding，改用 Bootstrap 的间距工具类如p-3、py-md-4 - 如果用了自定义 CSS 设置
min-height，务必确认它和 flex 的stretch行为不冲突——flex 会优先满足min-height，但不会强制压缩内容
IE11 兼容性下不能依赖 align-items-stretch
IE11 对 flex 的 align-items: stretch 支持不稳定，尤其当列中存在 position: absolute 或 transform 元素时，等高会失效。
- 必须降级方案：用
table-cell布局，即class="d-table"+d-table-cell，但会丢失响应式断点控制 - 更现实的做法是放弃 IE11 下的严格等高，用 JS 补丁（如
matchHeight库），仅在document.readyState === 'complete'后执行 - 注意
matchHeight的 selector 要精确匹配到真实内容容器，而不是col—— 否则动态加载内容后需手动调用$.matchHeight._update()
等高这件事，表面是布局问题，实际卡点常在内容容器的嵌套层级和盒模型细节上。别急着加 JS，先看 row 有没有 align-items-stretch，再查每层 div 的 height 和 box-sizing 是否干净。
