移动端最小高度应使用 .min-vh-100 而非 .min-h-100，因其直接基于视口高度、不依赖父容器，但需确保 html/body 无 height: auto、避免无高度外层 div、.row 需加 d-flex；如需仅移动端生效，须自定义媒体查询。
移动端最小高度不能只靠 .min-h-* 工具类
Bootstrap 5 的 .min-h-100、.min-h-50 等类没有响应式断点变体，比如 .min-h-sm-100 或 .min-h-md-100 根本不存在。你写 class="container min-h-100"，它在所有断点下都生效，且参照的是父容器高度——而移动端父容器（html/body）往往没显式高度，导致实际计算结果为 0。
.min-vh-* 是移动端最小高度的可靠起点
.min-vh-100 等价于 min-height: 100vh，直接锚定视口高度，不依赖父级是否设高，对移动端更鲁棒。但必须满足三个前提：
-
html和body不能被 JS 动态设为height: auto（常见于某些 UI 框架初始化脚本） - 避免外层套无高度的
<div>，否则高度链中断 - 若
.container嵌在.row内，需确保.row有d-flex，否则.min-vh-*在.col上基本无效
要“仅在移动端生效”，得自己写媒体查询
Bootstrap 不提供 .min-vh-sm-100 这类类名。真要限制“只在
@media (max-width: 767.98px) {
.container-min-h-mobile {
min-height: 300px;
}
}
或者更贴近视口：
@media (max-width: 767.98px) {
.container-min-h-mobile {
min-height: 80vh;
}
}
别用 vh-100（即 height: 100vh），它在 iOS Safari 地址栏收放时会跳变，且内容超长会被截断。
内容少时页脚飘中间？光设最小高度不够
单纯给 .container 加 .min-vh-100 只解决“至少一屏”，不解决“剩余空间填满”。如果页面有固定 header/footer，且希望 .container 吃掉中间空白，必须用 Flex 布局：
<body class="d-flex flex-column min-vh-100">
<header></header>
<main class="flex-grow-1">
<div class="container">这里才真正铺满剩余高度</div>
</main>
<footer></footer>
</body>
注意：flex-grow-1 必须作用在包裹 .container 的直接父元素上，而不是 .container 自身——它本身是块级元素，不参与 flex 分配。
真正容易被忽略的是：移动端高度失效，八成不是类写错了，而是某个中间父容器悄悄中断了高度链，或者第三方脚本偷偷重写了 html 的内联样式。
