bootstrap 5.0–5.2 不支持 sticky-bottom 类，5.3+ 版本才引入但需满足父容器可滚动且无 overflow-y: hidden；nav 必须是父容器最后一个子元素，建议手动写 position: sticky; bottom: 0 并设 z-index: 1030。
Bootstrap 5 没有 sticky-bottom 类可用——它在 5.3+ 版本中才被加入，且行为受限；直接写 class="sticky-bottom" 在多数 5.0–5.2 项目里根本不会生效。别怪自己漏看了文档，是框架版本不支持。
为什么 sticky-bottom 类经常“没反应”
即使你用的是 Bootstrap 5.3+，sticky-bottom 也只在满足特定条件时才触发：父容器必须有滚动高度（比如内容超出视口），且不能设 overflow-y: hidden；如果页面很短，body 没溢出，position: sticky 就不会“吸底”，而是退化为普通定位——这时导航栏就浮在中间不动了。
- 常见误判：加了类但页脚/导航栏没贴底 → 先检查
body或其直接父容器是否设置了min-vh-100或明确高度约束 -
sticky-bottom不是“永远贴浏览器底边”，而是“贴住最近可滚动祖先的底边”——如果祖先没滚动，它就不动 - 移动端 Safari（尤其 iOS 15.4 之前）对
sticky+bottom支持不稳定，真机测试比模拟器更可靠
手动写 position: sticky; bottom: 0 更可控
绕过 Bootstrap 类的版本依赖，直接用 CSS 控制更稳妥。关键不是加什么类，而是确保 DOM 结构和样式协同工作：
-
nav必须是其父容器的**最后一个子元素**（否则sticky到底部不触发） - 父容器（如
或<main></main>）不能有overflow-y: hidden，否则粘性失效 - 显式声明
bottom: 0，仅靠sticky-top或 flex 布局无法实现底部吸附 - 加
z-index: 1030避免被其他组件遮挡（Bootstrap 默认 navbar 是 1000）
示例 CSS：
nav.fixed-bottom {
position: sticky;
bottom: 0;
z-index: 1030;
}
fixed-bottom 要配 pb-* 留白，否则内容被盖住
用 fixed-bottom 类看似简单，但它会让导航栏脱离文档流，导致上面的内容直接顶上来——文字、按钮、表单全被遮住。这不是 bug，是 fixed 定位的必然结果。
- 必须给主体内容区（比如
<main></main>）加pb-4或pb-5（对应 1.5rem 或 3rem 底部内边距） - 这个留白要静态写死，不能靠 JS 动态计算；否则 SSR 或首屏渲染时仍会闪现遮挡
- 移动端软键盘弹出时，
fixed-bottom会被顶起或错位，iOS Safari 尤其明显 - 别在同一个元素上同时写
sticky-bottom和fixed-bottom—— 后者会覆盖前者，且语义冲突
真正难的不是代码，是分清你要的“固定”类型
想让导航栏“随滚动始终贴底”，就得用 sticky 或 fixed；如果只是“内容少时沉到底部”，那应该用 d-flex flex-column min-vh-100 + mt-auto。混用这两种逻辑，后面所有调试都是在补漏洞——比如给 sticky-bottom 加 mt-auto，或者给 fixed-bottom 套 flex 布局，只会让定位更不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
