col类配合h-100无法自动填高，因.row高度默认由内容撑开而非固定值，导致align-items:stretch失效；需逐层设置min-vh-100→h-100→d-flex flex-column→flex-grow-1才能实现等高填满。
用 col 类配合 h-100 无法自动填高？
Bootstrap 默认的栅格系统只控制宽度和响应式断点，col 容器本身不继承父容器高度，所以即使父容器有明确高度，子 col 也不会自动拉伸填满。常见现象是两列内容高度不一致，右侧列看起来“短一截”。
根本原因在于 Flexbox 的默认行为：.row 是 display: flex，但它的子项（即 .col）默认 align-items: stretch 只在父容器有**明确高度**时才生效；而多数页面中，.row 高度由内容撑开，没有固定值，导致拉伸失效。
- 别直接给
.col加height: 100%——它没参考系，父.row高度是 auto -
h-100必须逐层传递：父容器 →.row→.col，缺一层就失效 - 如果父容器是
body或main，需确保它们有min-height: 100vh或类似约束
真正起效的组合：Flex + min-vh-100 + d-flex
最可靠的方式不是依赖栅格自身，而是把两列容器变成独立的 Flex 容器，让内容在列内自主拉伸。适用于需要左右两列等高、且各自内部内容需垂直居中或填满的场景。
示例结构（Bootstrap 5）：
<div class="d-flex min-vh-100">
<div class="col-6 bg-light d-flex flex-column">
<h3>左侧</h3>
<div class="flex-grow-1 d-flex align-items-center justify-content-center">
内容垂直居中
</div>
</div>
<div class="col-6 bg-dark text-white d-flex flex-column">
<h3>右侧</h3>
<div class="flex-grow-1 d-flex align-items-center justify-content-center">
同样填满且居中
</div>
</div>
</div>
-
min-vh-100确保外层有最小视口高度，提供拉伸基准 - 每个
.col-6加d-flex flex-column，使其成为纵向 Flex 容器 -
flex-grow-1作用于内容区，吃掉剩余空间；再用align-items/justify-content控制内部对齐 - 避免嵌套
.row—— 此时栅格类仅用于宽度控制，高度逻辑由 Flex 承担
如果必须用标准 .row/.col 结构？
可以，但要补全高度链路。前提是父容器（比如 <main></main>）已设高度约束，且你接受 CSS 层级侵入。
- 给最外层容器加
style="min-height: 100vh;"或min-vh-100 -
.row必须加h-100（否则子.col没高度参考） - 每个
.col加h-100和d-flex flex-column - 关键：列内内容区用
flex-grow-1占满可用空间，而不是靠height: 100%
错误写法：<div class="col h-100"><div style="height: 100%">...</div></div> —— height: 100% 在无显式高度父级下无效。
兼容性与响应式注意点
上述方案在 Bootstrap 5+ 中稳定，但要注意：
- Bootstrap 4 不支持
min-vh-100，得手写min-height: 100vh - 若启用
container或container-fluid，确保它们没额外 padding/margin 干扰高度计算 - 在小屏幕折叠为单列时（如
col-12），flex-column仍有效，但flex-grow-1可能导致内容被过度拉伸，建议用@media控制或改用flex-fill - 如果有滚动需求（比如右侧列需独立滚动），把
flex-grow-1替换为overflow-y-auto+ 固定最大高度
实际项目里最容易漏的是 .row 缺少 h-100，或者外层容器忘了设最小高度——这两处一缺，整个填满逻辑就断了。
