两栏高度不一致是因为.row未生效align-items-stretch：Bootstrap 4默认display: block（需加d-flex），Bootstrap 5虽默认flex但易被display: block/!important覆盖；且align-items仅作用于直接子元素.col-*，嵌套.row会破坏等高；卡片内底部对齐需.col加d-flex flex-column、.card加h-100、按钮加mt-auto；移动端需检查媒体查询是否重置align-items或flex-direction。
为什么两栏高度不一致，align-items-stretch 没反应
因为 .row 要生效 align-items-stretch，必须是真正的 flex 容器，且没被覆盖。bootstrap 4 的 .row 默认是 display: block，这个属性下 align-items 完全无效；bootstrap 5 才默认 display: flex，但如果你加了 style="display: block"、float、或自定义 css 里写了 .row { display: block !important }，那它就退化回块级布局，align-items 自然被忽略。
实操建议：
- 用浏览器开发者工具检查
.row的 computeddisplay值，不是flex就得先修这个 - Bootstrap 4 必须手动加
d-flex类或自定义.equal-height-row { display: flex !important } - Bootstrap 5 优先删掉所有覆盖
display的样式，再确认没写align-items: flex-start这类覆盖
.col-* 是直接子元素吗？嵌套 .row 会破坏等高
等高只作用于 .row 的**直接子元素**（即 .col-*）。一旦你在某列里再包一层 <div class="row">，那内层的 .row 就不再是外层 .row 的子项，它的子列也不再受外层 align-items 控制——结果就是“左边空，右边高”，左边死活拉不上去。
常见错误结构：
<div class="row align-items-stretch">
<div class="col-md-6">
<div class="row"><div class="col-12">内容</div></div>
</div>
<div class="col-md-6">内容很长</div>
</div>
正确做法：删掉中间那层 .row，或者给它也加 d-flex align-items-stretch（但通常没必要，直接用 .col 更干净）。
卡片、文字、按钮怎么对齐到底部？h-100 加在哪才有效
align-items-stretch 只让 .col-* 等高，不会让里面的 .card 或 <p> 也撑满。如果你希望每张卡片都填满整列高度，并让按钮钉在底部，就得两步走：
- 给
.card（或你真正要等高的容器）加h-100—— 不是加在.col上 - 给
.col加d-flex flex-column，再给按钮加mt-auto
示例：
<div class="col-md-6 d-flex flex-column">
<div class="card h-100">
<div class="card-body">
<p>标题和正文</p>
<button class="btn btn-primary mt-auto">操作</button>
</div>
</div>
</div>
注意：.col 本身不能设 height: 100% 或 min-height，否则会干扰 stretch 行为；所有内部元素也应确保 box-sizing: border-box 生效。
移动端折叠后还想要等高？小心媒体查询悄悄关掉它
桌面端正常，切到小屏（如 sm 或 xs）后两栏变单列、高度又不一致了？大概率是某处媒体查询重写了 align-items：
- 查自定义 CSS 是否含类似
@media (max-width: 768px) { .row { align-items: flex-start !important; } } - 响应式断点里如果用了
flex-direction: column，align-items: stretch在垂直方向上需要容器有明确高度（比如min-height: 100vh），否则无效 - 单列堆叠时等高本无意义，但若真需要（比如卡片并排换为上下），可改用
d-grid+grid-template-rows: 1fr 1fr，比 Flex 更可控
真正卡住人的，从来不是“怎么写”，而是“谁在背后偷偷改了 display 或 align-items”——尤其是那些带 !important 的全局样式或第三方插件 CSS。
