bootstrap 5 原生不支持断点级最小高度类（如 min-h-md-100vh），根本原因是高度链断裂、flex 上下文缺失及栅格设计限制；需配合 .row.d-flex、自定义媒体查询类（如 @media (min-width: 768px) { .minh-md-100vh { min-height: 100vh; } }）及 html/body min-height: 100% 才能生效。
Bootstrap 5 原生不支持类似 min-h-md-100vh 这样的响应式最小高度类，强行加 min-height 行内样式或 .min-h-100 在断点下不会按预期生效——根本原因不是写法错，而是高度链断裂、Flex 上下文缺失、以及栅格类本身的设计限制。
为什么 col-md-6 min-h-100 在中屏下没效果
因为 .min-h-100 是全局生效的（无断点变体），它按父容器高度计算；而 .row 默认是 display: block，自身高度为 auto，导致子列的 min-height 参照值为 0。即使写了 min-height: 300px，浏览器也只会“不低于 0”，内容空时仍塌缩。
-
.col是块级元素，不继承父高，也不拉伸父容器 -
.row必须显式获得高度来源（如min-height: 100vh或激活 Flex） - 仅靠
col-md-6无法触发断点级高度控制——它只管宽度，不管高度 -
.min-vh-100虽按视口算，但它也依赖html/body未被设为height: auto
用媒体查询 + 自定义类实现断点级最小高度
这是最可控、可维护的方案。例如让列在 ≥768px（md）时最小高度为 100vh，需严格匹配 Bootstrap 的断点值（$breakpoint-md: 768px），并确保作用目标是已具备 col 类的元素。
- 不要覆盖
.col基础样式，新增语义化类如minh-md-100vh - CSS 必须写成
@media (min-width: 768px) { .minh-md-100vh { min-height: 100vh; } }，写成767px会导致临界失效 - 该类必须配合父级
.row.d-flex和子列未设align-self: flex-start才能真正撑开 - 若需兼容 Safari 或移动端地址栏收放，考虑用
100dvh替代100vh，但注意 IE/旧 Safari 不支持
@media (min-width: 768px) {
.minh-md-100vh {
min-height: 100dvh;
}
}
必须激活 Flex 布局才能让最小高度“可见”
.row 默认不是 Flex 容器，.col 也就无法通过 align-items: stretch 拉伸。不加 d-flex，再高的 min-height 都只是“纸上参数”。
- 给
.row加d-flex，它才变成 Flex 容器，子列自动成为 flex item - 避免在列上写
height: 100%—— 若父级无明确高度，它会算成 0，反而压制min-height - 别用
flex-shrink: 0或align-self: flex-start，这会让列脱离 stretch 行为 - 如果列内有
flex-direction: column子容器，它自身的min-height才可能向上影响父列
示例结构：
<div class="row d-flex"> <div class="col-md-4 minh-md-100vh">内容</div> <div class="col-md-4">同高拉伸</div> </div>
容易被忽略的兼容性与陷阱
真正让最小高度在特定断点“稳住”的关键，往往卡在三处：HTML 结构完整性、CSS 层叠优先级、以及视口单位的实际渲染行为。
-
html和body必须有min-height: 100%，否则100vh在某些嵌套场景下会失准 - 自定义类名若和第三方库冲突（比如 Tailwind 的
min-h-），需检查 CSS 加载顺序 -
overflow: hidden父容器会截断超出部分，让min-height“看起来没生效” - 用
min-vh-100类时，它只在 Bootstrap 5.3+ 中支持断点变体（如min-vh-md-75），旧版本无效
复杂点不在写多少代码，而在确认高度是否真正传递到了目标列——从 html → body → .container → .row.d-flex → .col.minh-md-100vh 这条链，任何一环塌了，min-height 就只是个摆设。
