给.d-flex容器加height:100%无效，因其依赖父元素明确高度，而父级多为height:auto导致计算为0；应在.d-flex的直接父元素上设min-height（如.modal-content、.card自身等），并确保align-items:stretch不被position:absolute、未约束图片或错误flex属性干扰，h-100生效需完整继承链。
为什么给 .d-flex 容器加 height: 100% 没用
因为 height: 100% 是相对值，依赖父元素有明确高度；而 Bootstrap 的 .d-flex 容器（如 .modal-body、.card）的父元素往往只是 height: auto，计算结果就是 0。浏览器不会因为子项设了 flex: 1 就反向赋予父容器高度——这是循环依赖。
该在哪个层级加 min-height 才有效
必须加在 .d-flex 容器的**直接父元素**上，不是它自己，也不是更外层 wrapper。
-
.modal-body.d-flex→ 给.modal-content加min-height -
.card.d-flex→ 给.card自身加min-height（因它是直接父级） -
.container.d-flex→ 给.container加min-height - 全屏布局用
.app-layout.d-flex→ 给.app-layout加min-height: 100vh（或降级为100dvh）
align-items: stretch 失效的常见干扰项
即使父容器已设 min-height，等高仍可能失效，原因常藏在子项内部：
-
position: absolute子元素：完全脱离文档流，不参与高度计算 - 图片没加
img-fluid或max-width: 100%：单侧撑开但不触发拉伸 - 手动写了
height、min-height或flex-shrink: 0在.col上：覆盖默认拉伸行为 -
.col不是.row的直接子元素（例如嵌套了额外div）：align-items只作用于直系子项
h-100 和 d-flex 怎么配才稳
h-100 不是独立生效的类，它需要完整的高度继承链：
-
.col必须是.card的**直接父元素** -
.col要加d-flex（让自身成为 flex 容器，使.card成为它的子项） -
.card加h-100，才能填满.col的高度 - 避免在
.card-body里写min-height或height，否则会打断继承
真正起作用的是这一整条链，漏掉任一环，h-100 就只是个无效声明。
