因为.col是display: block，不继承父高；若.row无明确高度（如未设min-height: 100vh或d-flex），则.col的min-height无法生效，内容为空时仍塌缩为0。
为什么给 .col 直接设 min-height 没效果
因为 Bootstrap 的 .col 默认是 display: block，它不会自动继承父容器高度；如果父 .row 没有明确高度（比如没设 min-height 或 height），那子列的 min-height: 200px 就只是“最小不低于 200px”，但内容为空时仍会塌缩——它不负责“撑开”父级，也不强制拉伸。
常见错误现象：.col 写了 min-height: 300px，但 DevTools 里 computed height 还是 0；或者只在部分浏览器生效（尤其 Safari 对 block 元素高度继承更严格）。
- 确保
.row有可参照的高度来源：要么自身设min-height: 100vh，要么用d-flex+flex-fill构建弹性上下文 - 避免同时写
height: 100%和min-height——前者在无父高时计算为 0，会覆盖后者的意图 - 如果列内只有图片或空 div，记得检查是否被
overflow: hidden或浮动子项拖累高度计算
用 d-flex + align-items-stretch 实现真正等高列
Bootstrap 4+ 的 .row 默认仍是 display: block，要让同排 .col 等高并响应 min-height，必须激活 Flex 布局。这不是“加个类就完事”，而是要理解对齐行为依赖父容器的 display 类型。
正确做法是给 .row 加 d-flex，并确保子列没设 height 干扰 stretch 行为：
<div class="row d-flex"> <div class="col-md-4" style="min-height: 250px;">内容A</div> <div class="col-md-4" style="min-height: 250px;">内容B</div> <div class="col-md-4" style="min-height: 250px;">内容C</div> </div>
-
d-flex让.row变成 flex 容器，.col自动成为 flex item，align-items: stretch（默认）会拉伸所有列到最高子项高度 - 此时单个
.col的min-height才真正起作用：它既约束自身底线，又作为 stretch 的基准之一 - 别给
.col设flex: 0 0 auto或align-self: flex-start，这会绕过 stretch 行为
响应式 min-height 工具类怎么选：.min-h-* vs .min-vh-*
Bootstrap 5 提供的 .min-h-100 和 .min-vh-100 容易混淆，关键区别在于参照系不同：前者按父容器高度算，后者按视口（viewport height）算。
例如你想让一整行“至少占满一屏”，且该行在 .container 内：
-
.row.min-vh-100→ 正确：直接锚定视口，不依赖父级是否有高度声明 -
.row.min-h-100→ 错误：要求.container和它所有上级（包括html,body）都显式设了height: 100%，漏一级就失效 - 想让列在中屏以上才拉高？用
.min-vh-md-100，不是.min-h-md-100——后者依然依赖父高传递
性能提示：.min-vh-* 类内部用的是 min-height: 100vh，在 iOS Safari 中可能触发地址栏收起导致视口高度跳变，若需极致稳定，可配合 JS 监听 resize 动态修正。
嵌套栅格里 min-height 为什么会失效
当 .col 里再套一个 .row，而你想给内层列设 min-height，问题常出在“高度传递断裂”。外层 .col 是 block，不会把高度透传给内层 .row，哪怕你写了 height: 100%。
典型场景：侧边栏 + 主内容区，主内容区里还有两列卡片，希望卡片列等高。
- 不要在外层
.col上仅设height: 100%，它在 block 上下文中无效；改用d-flex flex-column+flex-fill构建高度链 - 内层
.row必须加d-flex，否则.col仍是孤立 block，min-height无参照 - 如果用了
position: absolute或float在列内部，它们脱离文档流，会导致min-height失去计算依据——加overflow: hidden或伪元素清除浮动
最易被忽略的一点：高度不是 CSS 属性的简单叠加，而是整条 DOM 链的显式声明接力；从 html 到 body 到 .container 到 .row 到 .col，任意一级“塌陷”，后面所有 min-height 都只是纸上谈兵。
