bootstrap 5 栅格类不支持 min-height 响应式控制，因其设计上避免高度干扰流式布局；需自定义媒体查询类（如 minh-md-100vh），确保父容器有高度支撑，并注意 100dvh 兼容性及 overflow 截断问题。
Bootstrap 5 中 min-height 无法直接用栅格类控制
Bootstrap 的栅格系统（如 col-md-6、col-lg-4）本身不提供任何 min-height 相关的响应式工具类。你试图在某个断点（比如 md 或 lg）下给列设最小高度，但官方 CSS 类里压根没定义类似 min-h-md-100 这种东西 —— 这不是遗漏，是设计如此。
原因很简单：高度行为和流式布局天然冲突。栅格列默认是“内容撑开”，加 min-height 容易破坏 flex 布局的对齐逻辑（尤其是 align-items: stretch），也和响应式重排目标不一致。
用自定义响应式 CSS 类替代原生栅格类
最稳妥的做法是放弃“找现成类”，自己写带媒体查询的 min-height 规则，并确保它能正确作用于目标元素（通常是 div 且已具备 col 类）：
- 不要覆盖
.col基础样式，而是新增一个语义化类名，比如minh-md-100vh - 在
@media (min-width: 768px)下设置min-height: 100vh；若需适配lg，则用@media (min-width: 992px) - 注意：Bootstrap 5 的断点值必须严格匹配其 Sass 变量，比如
$breakpoint-md是768px，别手写成767px导致临界失效 - 如果列内有
flex-direction: column或height: 100%父容器，min-height才会生效；否则可能被父级height: auto截断
示例 CSS：
@media (min-width: 768px) {
.minh-md-100vh {
min-height: 100vh;
}
}
HTML 中这样用：
<div class="row"> <div class="col-md-6 minh-md-100vh">...</div> <div class="col-md-6">...</div> </div>
用 style 属性临时调试，但别上线
开发阶段快速验证是否是高度问题，可以直接内联写：
<div class="col-md-6" style="min-height: 100vh;"> <p>但要注意：</p> <ul> <li>内联样式优先级高，会覆盖你后续加的媒体查询类，调试完必须删掉</li> <li> <code>100vh</code> 在移动端 Safari 中可能包含地址栏高度，导致溢出或滚动条；更安全的是用 <code>100dvh</code>（但 IE 和旧 Safari 不支持）</li> <li>如果列被包裹在 <code>.container</code> 或 <code>.container-fluid</code> 里，确认父容器没有 <code>overflow: hidden</code> 抑制了高度渲染</li> </ul> <h3>避免用 <code>h-100</code> 代替 <code>min-height</code> </h3> <p><code>h-100</code> 是“设为父容器 100% 高度”，不是“最小高度”。常见误用场景：</p> <ul> <li>父容器高度未定义（比如 <code>body</code> 或 <code>.row</code> 没设 <code>height</code>），<code>h-100</code> 就等于 <code>height: 0</code> </li> <li>在 <code>col</code> 上加 <code>h-100</code> 后发现高度没变，其实是父 <code>.row</code> 缺少 <code>h-100</code> 或 <code>min-height</code> 支撑</li> <li> <code>h-100</code> 在 <code>md</code> 断点下不会自动关闭，它全局生效；想只在大屏生效，仍得靠自定义媒体查询类</li> </ul> <p>真正需要“最小”而非“固定”高度时，<code>h-100</code> 就是错解。</p> <p>关键点在于：Bootstrap 栅格不管高度，这是它的定位决定的。你要的不是“怎么调一个开关”，而是“在哪个层加哪段 CSS 才不破坏布局流”。断点、父容器高度、视口单位兼容性 —— 这三个地方漏掉任何一个，<code>min-height</code> 都会静默失效。</p> </div>
