bootstrap 5 中 fixed-bottom 类已被彻底移除，需改用 sticky-bottom 工具类或自定义 position: fixed 样式，并注意父容器限制、内容区留白及移动端兼容性问题。
Bootstrap 5 中 fixed-bottom 类已彻底移除，直接写上去不会生效——这不是你漏写了 class，是框架本身不支持。
为什么 fixed-bottom 在 Bootstrap 5 里加了也没用
Bootstrap 4 里确实有 fixed-bottom，但 5.0 起就删了，官方文档里查不到，源码里也找不到对应 CSS 规则。你加了它，浏览器只会当普通 class 忽略，导航栏该在哪还在哪。
常见错误现象：<nav class="navbar fixed-bottom"></nav> 渲染后完全没“固定”效果，滚动时跟着页面一起动；或者只在局部容器里卡住不动，实际位置飘忽。
- 别在父容器上设
overflow: hidden或position: relative，否则position: fixed会以它为参考而非视口 - 如果用了
height: 100vh+fixed-bottom，内容区必须手动加pb-5（或更高）留出底部空间，否则文字被遮住 - 移动端软键盘弹出时，
fixed-bottom容易被顶到屏幕中间，尤其在 iOS Safari 上
用 position: sticky 实现“吸底”更可靠
Bootstrap 5.3+ 提供了 sticky-bottom 工具类，本质是 position: sticky; bottom: 0，它不脱离文档流，滚动时贴底、内容短时自然落到底部，兼容性比 fixed 好得多。
但要注意前提条件：
-
<nav></nav>必须是其父容器的最后一个子元素（DOM 顺序靠后） - 父容器不能有
overflow-y: hidden（否则 sticky 失效） - 父容器最好用
min-height: 100vh而非height: 100vh，避免内容撑高后被截断
示例结构：
<main class="flex-grow-1">...</main><nav class="navbar sticky-bottom">...</nav>
真要硬上 position: fixed 怎么配才不出错
如果你明确需要脱离文档流、始终钉在视口底部（比如底部操作栏），那就绕过 Bootstrap 工具类，自己写 CSS，但得补全所有干扰项：
- 给
<nav></nav>加position: fixed; bottom: 0; width: 100%; z-index: 1030; - 确保它不在任何
position: relative/absolute的 wrapper 里，否则定位参考错了 - 给主要内容区域（如
<main></main>）加padding-bottom: 60px（按 navbar 高度微调），不能只靠pb-5—— 因为pb-5是固定值，而fixed元素高度可能随内容变化 - 避免在
fixed-bottom区域内放<input>或<textarea></textarea>，软键盘会把它顶起来
移动端点击区域和可访问性容易被忽略
底部导航栏在手机上手指点不准，不是样式问题，是交互设计缺陷：
- 至少设
py-4 px-5（上下内边距 + 左右内边距），让热区够大 - 加上
min-height: 56px，符合 Material Design 推荐的最小触控高度 - 如果用了
position: fixed，记得给<nav></nav>加role="navigation"和aria-label，否则读屏器可能跳过 - 别用
transform: translateY()微调位置——它会让固定定位失效或触发重排
最麻烦的其实是 DOM 结构：哪怕 CSS 写对了，只要 <nav></nav> 套在某个 div class="container" 里，又或者 body 里多了一层没命名的 wrapper，sticky-bottom 就大概率不工作。检查 HTML 源码比调样式更重要。
