bootstrap 5 中无真正视口底部固定页脚工具类：fixed-bottom 已移除，sticky-bottom 对页脚基本无效；应按需选用 flexbox 粘性页脚（d-flex+min-vh-100+flex-fill）或手动 position: fixed 方案。
Bootstrap 5 里没有真正“始终固定在视口底部”的页脚工具类——fixed-bottom 已被彻底移除，sticky-bottom 在页脚上基本无效。你要的其实是两种完全不同的行为：一种是内容少时沉底、内容多时不遮挡的「粘性页脚」；另一种才是不管滚动与否、永远钉在屏幕最下方的「固定定位页脚」。选错方案，轻则页脚悬空，重则盖住正文或移动端失灵。
用 d-flex flex-column min-vh-100 实现粘性页脚（推荐）
这是 Bootstrap 5 官方推荐、语义清晰、兼容性最好的方式。它靠 Flex 布局把页脚“推”到底部，不是靠定位“压”过去。
-
html和body必须设height: 100%，否则min-vh-100没基准高度 - 外层容器（通常是
或一个包裹<div>）加 <code>d-flex flex-column min-vh-100 - 主体内容区（如
<main></main>）必须加flex-fill（等价于flex: 1），不能写height: 100%—— 后者会锁死高度，内容溢出时页脚卡住不动 - 页脚本身不加任何定位类，也不需要
mt-auto；flex-fill已确保它被自然推到最后 - 结构示例中，
<footer></footer>必须是 flex 容器的最后一个子元素，中间不能插无关 wrapper（比如 WordPress 主题自带的<div id="page">） <h3>为什么 <code>sticky-bottom在页脚上基本没用sticky-bottom是为导航栏这类“滚动中保持可见”的组件设计的，不是给页脚用的。它的生效前提很苛刻：- 父容器必须有可滚动高度（比如
overflow-y: auto或显式max-height），而页脚几乎总是直接插在前，父容器就是，默认不可滚动 - DevTools 里看到
position: static就是失效信号——不是你漏写了 class，是浏览器直接回退了 - 在内容稀疏的页面（比如登录页、空列表）上，
sticky-bottom完全不会触发，页脚就堆在内容末尾，离视口底边还差一大截 - 即使强行给
加min-height: 100vh，它也只在“有滚动”时才吸底，短页面依然无效
真要用
position: fixed钉在视口底边？必须手动兜底如果你明确要“永远贴底、不随滚动移动”（比如底部操作栏、快捷工具栏），就必须用
position: fixed，但代价是你得主动处理所有布局干扰：- 页脚加
position: fixed; bottom: 0; left: 0; right: 0;，并设z-index: 1030（高于 Bootstrap 默认模态框） - 主要内容容器（如
<main></main>）必须预留底部空间：pb-5或padding-bottom: 60px（按实际页脚高度微调） - 页脚不能放在
.container内——它的max-width和margin: auto会让固定效果只作用于容器宽度内，应改用.container-fluid或脱离栅格链 - iOS Safari 软键盘弹出时，
fixed元素常被顶到屏幕中间，此时sticky-bottom反而更可靠（但仅限导航栏场景）
最容易被忽略的是：页脚是否真的该“固定”。很多开发者以为“固定=专业”，结果导致小屏内容被遮、动态加载后页脚错位、CMS 模板里因嵌套 wrapper 导致 flex 失效。先想清楚你要的是“沉底”还是“钉底”，再选方案——前者靠布局，后者靠定位，混用只会让问题更难排查。
- 父容器必须有可滚动高度（比如
