.row 默认不等高是因为其高度由内容自然撑开，缺乏统一基准高度，导致子元素.col虽有align-items: stretch也无法跨行等高；需为.row设min-height并配合.col的d-flex+h-100及.card的h-100才能实现真正等高。
为什么 .row 默认不等高
因为 bootstrap 的 .row 虽然是 display: flex，但它的 align-items: stretch 只让直接子元素（即 .col）在**本行内**拉伸到最高项的高度——这没错；但问题在于：.row 自身高度完全由内容撑开，没有“基准高度”可参照，所以 .col 的拉伸只是相对于这一行的动态高度，不是跨行或跨容器的统一基准。
.row 加 d-flex 没用？检查是否漏了高度上下文
d-flex 本身只是激活 flex 布局，但它不会凭空造出垂直空间。align-items: stretch 要生效，前提是父容器（至少是 .row）有明确的高度来源。否则所有 .col 都会按自己内容自然撑高，视觉上还是参差不齐。
- 给
.row加min-height: 200px（数值按业务最小卡片高度定），再确保子.col没设height或min-height干扰拉伸 - 全屏/视口级场景优先用
min-vh-100，比vh-100更安全（避免 Safari 地址栏缩放导致高度跳变） - 嵌套在
.container或.container-fluid内时，确认这些父容器没设overflow: hidden或max-height截断了 flex 行为
.col 必须加 d-flex h-100 才能真正“拉满”
仅靠 .row 的 flex 不足以让 .card 或 .card-body 等内部元素也等高——因为高度继承链断在了 .col 这一层。它默认是普通块级盒子，不提供 flex 上下文给子元素。
-
.col必须同时加d-flex（让它变成 flex 容器）和h-100（提供高度参考） -
.card必须加h-100，且不能有height、min-height或flex: none类 - 如果要控制
.card-body内部文字/按钮对齐，需额外加d-flex flex-column h-100和flex-grow-1
图片或文本溢出导致视觉不等高？别硬设 height
常见错误是给 .card-img-top 或 .card 直接加 height: 200px，结果文字被截、响应式失效、移动端错位。真等高必须靠 flex 拉伸，而不是强制裁剪。
-
.card-img-top推荐用min-height: 180px+object-fit: cover保比例不拉伸 - 长文本用
text-truncate或line-clamp（配合display: -webkit-box）控行数，而非压高度 - 避免在
.col上写style="height: 100%"—— CSS 中百分比高度依赖父元素有显式高度，而.row默认没有
最易忽略的一点：等高不是目的，而是为了对齐服务。如果只是想让底部按钮对齐，其实不需要整列等高，改用 align-self-end 在特定 .col 上更轻量；只有当多张卡片并排、且用户明确感知“高度不一致影响阅读节奏”时，才值得上整套 d-flex + h-100 链路。
