col里的div默认不撑满高度是因为row无明确高度且子元素未触发bfc或高度继承；解决方法包括：①给row加min-vh-100并给div加h-100；②给col加d-flex flex-column、div加flex-grow-1；③注意vh兼容性及避免padding/margin干扰。
为什么 col 里的 div 默认不撑满高度
因为 Bootstrap 的 col 是基于 flex 布局的，但它的父容器（row）默认没有设置 height 或 min-height，内部子元素又没触发 BFC 或高度继承机制，所以 div 只会“包裹内容”，不会垂直铺满父 col。
用 h-100 类是最直接的解法
Bootstrap 5+ 内置了高度工具类，h-100 表示“高度为父容器的 100%”。但它生效的前提是：父级（即 col）本身得有可计算的高度——这通常靠其父 row 或更外层容器提供。
- 确保
col的直接父级（row）有明确高度来源，比如设了min-height: 100vh，或被其他 CSS 限定了高度 - 给目标
div加上h-100，不是col自己加 - 如果
div是col的唯一子元素，且col没 padding/margin 干扰，h-100通常就能生效
<div class="row min-vh-100">
<div class="col">
<div class="h-100 bg-primary"></div>
</div>
</div>
当 h-100 失效时，换用 d-flex flex-column + flex-grow-1
常见于嵌套较深、或父容器高度不可控的场景。此时靠 flex 的弹性分配比百分比高度更可靠。
- 给
col加d-flex flex-column，让它变成垂直 flex 容器 - 给目标
div加flex-grow-1，它就会占满剩余空间 - 注意移除可能干扰的 margin/padding，特别是
col的默认 padding - 如果
col里还有别的兄弟元素，flex-grow-1仍能按需分配空间
<div class="row">
<div class="col d-flex flex-column p-0">
<header class="bg-light">Header</header><main class="flex-grow-1 bg-primary"></main>
</div>
</div>
别忽略 min-vh-100 和 vh 的兼容性差异
用 min-vh-100 比直接写 height: 100vh 更稳妥，尤其在 iOS Safari 或某些 Android WebView 中，100vh 会把地址栏高度也算进去，导致滚动条或截断。
-
min-vh-100是 Bootstrap 提供的响应式高度类，等价于min-height: 100vh - 若需严格等高（如全屏卡片布局），优先用
min-vh-100+h-100组合 - 在 modal、offcanvas 等动态容器里，
vh单位可能因滚动状态变化而抖动，这时 flex 方案更稳
div 加 h-100 却忘了 row 或 body 缺少高度锚点；或者在 flex 布局中漏掉 flex-shrink-0 导致内容压缩变形。这些细节不报错，但效果完全不对。
