d-flex加了却没让列等高，是因为.row必须是真正的flex容器且未被覆盖：bootstrap 4默认display: block，需加d-flex；bootstrap 5虽默认flex，但易被display: block/!important等覆盖；.col-*必须为.row直接子元素，嵌套.row会中断等高链。
为什么 d-flex 加了却没让列等高
因为 .row 必须是真正的 flex 容器，且未被覆盖。Bootstrap 4 的 .row 默认是 display: block，此时 align-items 完全无效；Bootstrap 5 虽默认 display: flex，但一旦你写了 style="display: block"、float，或 CSS 里有 .row { display: block !important }，它就退化回块级布局。
检查方式：用浏览器开发者工具看 .row 的 computed display 值，不是 flex 就得先修这个。
- Bootstrap 4 必须加
d-flex类（或自定义.equal-height-row { display: flex !important }） - Bootstrap 5 优先删掉所有覆盖
display的样式，再确认没写align-items: flex-start这类显式覆盖 -
.col-*必须是.row的**直接子元素**；嵌套一层<div class="row"> 就会中断等高链 <h3> <code>min-vh-100和h-100到底该用哪个min-vh-100是“至少一屏高”，等价于min-height: 100vh，内容超出时自动撑高，只有一条滚动条；h-100是“占满父容器高度”，依赖父级有明确高度上下文——比如.row.d-flex+.col+.card.h-100才能生效。- 想让 banner 或登录区“至少占满一屏”，用
min-vh-100；别用vh-100（锁死高度，Safari 地址栏收放时跳变） - 想让卡片/列“和同行其他列一样高”，用
h-100，但前提是父.row已是d-flex，且没被height: auto的 JS 脚本（如某些 UI 初始化）破坏高度链 -
min-h-100按父容器高度算（父若无高则无效），min-vh-100直接按视口算，更可靠
响应式高度怎么随断点切换
Bootstrap 提供了带断点前缀的变体，比如
min-vh-md-75表示“≥768px 时最小高度为视口 75%”，适合小屏降级为半屏 banner。- 可用断点：-sm-、-md-、-lg-、-xl-、-xxl-，对应各栅格断点宽度
- 不要混用
min-vh-100和height: 100%—— 后者在父级无高时算出 0，会覆盖前者 - 如果要用相对高度单位，优先选
dvh（如height: 50dvh）而非vh，避免 iOS Safari 地址栏遮挡问题（2026 年已广泛支持）
图片和卡片里高度为啥还是不一致
常见干扰源不是栅格本身，而是内部元素破坏了高度继承链：图片没加
img-fluid会溢出、.card-body写了height或min-height会截断、margin-bottom手动写死会撑开父容器。- 图片必须加
img-fluid，否则大图直接撑破卡片高度 -
.card加h-100时，确保.card-body不设固定高度，也不用align-self: flex-start - 删除所有手动写的
margin-bottom，改用mb-3或响应式mb-md-4 - 长文本或 URL 撑破列宽？给列内
<p></p>加word-break: break-word
display: block !important或 JS 动态设了html { height: auto }—— 这些细节不查 DOM，光看 HTML 结构永远找不到。 - 想让 banner 或登录区“至少占满一屏”，用
