bootstrap列等高核心是让.row成为flex容器并保持align-items:stretch；常见失效原因包括display被覆盖、列内含absolute元素、设置height/min-height/flex:none、嵌套.row断链，且flex-fill不用于等高。
Bootstrap 中让列自动等高，核心不是给列加类，而是让 .row 成为 Flex 容器——BS4 必须加 d-flex，BS5 默认已是 Flex，但容易被覆盖；只要 .row 的 display 是 flex 且 align-items 是 stretch（默认值），.col-* 就会天然等高。
为什么加了 d-flex 还不等高？
常见原因是父容器或列自身干扰了 Flex 的拉伸逻辑：
-
.row被其他 CSS 覆盖成display: block或display: grid—— 打开开发者工具看 computeddisplay值 -
.col-*内部有position: absolute元素：它脱离文档流，所在列“报告”的高度可能为 0 -
.col-*上写了height、min-height或flex: none：这些会锁死拉伸行为 - 嵌套了额外的
.row：只有.row的**直接子元素**参与align-items: stretch，内层.row断链
d-flex 和 flex-fill 别混用
flex-fill 不是用来等高的，它是让 flex 项目“占满主轴剩余空间”的工具，在 .row + .col-* 结构里加它反而破坏响应式比例：
-
flex-fill等价于flex: 1 1 auto，会覆盖.col-md-6的原始flex值，导致断点失效 - 即使加了
flex-fill，若.row不是 Flex 容器（BS4 没加d-flex），它根本无效 - 真正需要“撑满”的通常是卡片内部的
.card-body，而不是列本身
卡片等高必须分两步走
列等高 ≠ 卡片等高。列只是容器，.card 是它的子元素，不会自动继承高度：
- 第一步：确保
.col-*有可继承的高度基准——BS4 要同时加d-flex h-100；BS5 若.row高度稳定，单加h-100可能就够了 - 第二步：给
.card加h-100，让它继承列的高度 - 如果要按钮沉底，别动列，改卡片内部：
.card加d-flex flex-column h-100，.card-body加flex-grow-1，按钮加mt-auto
最易被忽略的点：等高依赖的是父容器的 Flex 行为和子项的“无干扰”状态，而不是某个 magic class。检查 computed styles 比猜更可靠，尤其在升级 BS 版本或引入第三方样式后。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
