Bootstrap 5 中 fixed-bottom 类已被彻底移除，硬加无效；应使用 flex 布局（d-flex flex-column min-vh-100 + flex-grow-1）实现页脚吸底，或 sticky-bottom（需 footer 为父容器末子元素且父容器可滚动）。
Bootstrap 5 中没有 fixed-bottom 类，硬加无效；想让页脚“吸底”，必须用 flex 布局 + min-vh-100，而不是靠 position: fixed。
为什么 fixed-bottom 在 Bootstrap 5 里完全没用
Bootstrap 4 确实有 fixed-bottom，但 5.0 起已从源码中彻底删除——不是你漏写 class，是框架压根不认这个字符串。浏览器会把它当普通类名忽略，nav 依然按文档流渲染，滚动时跟着动。
常见错误现象：<nav class="navbar fixed-bottom"></nav> 渲染后位置飘忽、在局部容器里卡住、或根本不动；检查 computed styles 会发现根本没有 position: fixed 生效。
别在父容器上设 overflow: hidden 或 position: relative，否则即使手动写 position: fixed，定位参考也会错位（以父容器为基准，而非视口）。
用 flex + min-vh-100 实现真正可靠的吸底
这是 Bootstrap 5 官方推荐的语义化做法，不脱离文档流，兼容性好，内容短时页脚落底、内容长时自然撑开。
-
必须设class="d-flex flex-column min-vh-100"（不能用height: 100vh，否则内容超长会被截断） -
<main></main>加class="flex-grow-1"，让它占满剩余空间 -
<footer></footer>放在<main></main>之后，且是的最后一个子元素 - 确保
<footer></footer>没有position: absolute或transform，否则破坏 flex 布局上下文
sticky-bottom 工具类怎么用才不出错
Bootstrap 5.3+ 提供了 sticky-bottom，本质是 position: sticky; bottom: 0，比 fixed 更轻量，但限制更具体：
-
<footer></footer>必须是其直接父容器的最后一个子元素（DOM 顺序靠后） - 父容器不能有
overflow-y: hidden（否则 sticky 失效） - 父容器建议用
min-height: 100vh，避免内容少时高度不足导致“吸不住” - 移动端软键盘弹出时，
sticky-bottom表现比fixed稳定，但仍需测试 iOS Safari
真要硬上 position: fixed 怎么配
仅适用于必须脱离文档流的场景（如底部操作栏），但得补全所有干扰项：
- 给
footer加style="position: fixed; bottom: 0; width: 100%; z-index: 1030;" - 确保它不在任何
position: relative或position: absolute的 wrapper 里 - 给
<main></main>加padding-bottom: 60px（按 footer 实际高度微调，别只依赖pb-5） - 避免在 fixed 区域内放
<input>或<textarea></textarea>，iOS 软键盘会把它顶到屏幕中间
最易被忽略的是：flex 吸底方案里，<footer></footer> 必须是 的直接子元素且排最后——DOM 顺序错了，flex-grow-1 就没法把空间“推”给它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
