Bootstrap两栏高度不一致是因为.row虽默认flex且align-items:stretch，但子列需为直接子元素、父容器无高度限制、未被覆盖样式；嵌套.row或响应式覆盖align-items会导致等高失效。
为什么默认的 Bootstrap 两栏会高度不一致
因为 bootstrap 的 .row 默认是 display: flex（v4/v5），但它的子列（.col-*）只在主轴（水平）上对齐，交叉轴（垂直）是否拉伸，取决于父容器是否有明确高度或内容撑开。没有内容的列不会自动“等高”，尤其当一栏文字少、另一栏有长列表时，视觉上就明显错位。
用 align-items: stretch 强制等高（最简方案）
Bootstrap 的 .row 默认已设 align-items: stretch，所以只要确保：① 父容器没加 overflow: hidden 或 height 限制；② 两栏都是 .row 的直接子元素；③ 没手动覆盖 align-items。常见错误是嵌套了多层 .row 却忘了内部也要设 .d-flex。
- ✅ 正确结构：
<div class="row"><div class="col-6">...</div><div class="col-6">...</div></div> - ❌ 错误写法：
<div class="row"><div class="col-6"><div class="row"><div class="col-12">...</div></div></div></div>—— 内层.row不是外层.row的直接子项，等高失效 - ⚠️ 注意：如果用了
min-height或height在列上，会干扰 stretch 行为
响应式断点下高度行为不一致怎么办
小屏（如 xs）切单列后，等高自然消失——这是预期行为。但如果你在 md 和 lg 下仍想保持等高，而实际效果变差，大概率是媒体查询里重写了 align-items，或用了 flex-direction: column 却没同步调整对齐方式。
- 检查自定义 CSS 是否含类似
@media (max-width: 768px) { .row { align-items: flex-start !important; } }这类覆盖 - 避免在响应式类中混用
flex-column和align-items: stretch—— 垂直方向的 stretch 需要容器有明确高度，否则无效 - 若需跨断点强等高，可加
style="min-height: 100vh;"到.row，但仅限视口级布局，别滥用
兼容旧版 Bootstrap 3 的等高补救
Bootstrap 3 的 .row 是 display: block，原生不支持等高。必须手动引入 Flexbox 支持，且不能只靠改 .row —— 因为 .col-* 在 v3 中是浮动布局，直接加 display: flex 会导致列塌陷。
- 推荐做法：给
.row加自定义类.d-flex（display: flex !important），再给每个.col-*加.d-flex-item（flex: 1） - 务必确认你没在
.col-*上设float: left或width百分比冲突——Flex 会忽略 float - IE10/11 对
flex: 1支持不稳定，建议用flex: 1 1 auto并测试
align-items 给 reset 了。 
