Bootstrap 5 已彻底移除 fixed-bottom 类，仅保留 sticky-top；推荐用 sticky-bottom（需父容器为 flex-column+min-vh-100 且 nav 为末子元素），或手动写 position: fixed 并预留空间。

bootstrap 5 中 fixed-bottom 类已彻底移除，直接添加不会生效——这不是你写错了，是框架本身不支持。

为什么 fixed-bottom 在 Bootstrap 5 中完全失效

Bootstrap 4 曾提供 fixed-bottom 工具类，但官方在 5.0 版本中明确弃用并删除。它不再存在于源码、文档或 CSS 输出中。如果你在 HTML 中写了 <nav class="navbar fixed-bottom"></nav> 却没效果，不是漏了 JS 或 CDN，而是这个类根本不存在。

• Bootstrap 5 的定位类只保留了 sticky-top（用于顶部吸附），没有对称的底部版本
• 所有基于 fixed-bottom 的旧教程、Stack Overflow 答案或 AI 生成代码，若未注明 Bootstrap 版本，大概率已过时
• 检查浏览器开发者工具：元素上确实没有 position: fixed; bottom: 0 样式，说明类未被解析

用 sticky-bottom 实现滚动中“视觉固定底部”（推荐）

Bootstrap 5.3+ 新增了 sticky-bottom 工具类，它是目前最接近原生语义、且无需手写 CSS 的方案。但它不是 fixed，而是 position: sticky; bottom: 0，行为更可控。

• 必须确保 <nav></nav> 是其**直接父容器的最后一个子元素**（例如放在 底部，前面不能有其他兄弟节点）
• 父容器不能设 overflow-y: hidden，否则 sticky 失效；若父容器是 ，建议加 overflow-y: auto
• 需搭配 min-vh-100 和 d-flex flex-column 布局才能稳定触发（尤其在内容较短时）
• iOS Safari 15.4 之前对 上的 sticky 支持差，稳妥做法是包一层 <div class="d-flex flex-column min-vh-100"> <p>示例结构：</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill4914" title="VPS Bootstrap"><img src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill4914" title="VPS Bootstrap">VPS Bootstrap</a> <p>从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p> </div> <a href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;">&lt;body class=&quot;d-flex flex-column min-vh-100&quot;&gt; &lt;main class=&quot;flex-grow-1&quot;&gt;...&lt;/main&gt; &lt;nav class=&quot;navbar sticky-bottom&quot;&gt;...&lt;/nav&gt; &lt;/body&gt;</pre> <h3>用 position: fixed 手动实现（兼容性最强但要兜底）</h3> <p>当需要支持 IE 或要求绝对稳定时，绕过 Bootstrap 工具类，直接写 CSS 更可靠。但必须同步处理布局副作用。</p> <ul> <li>导航栏必须加 <code>position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030
• 它的前一个兄弟元素（如 <main></main>）必须预留空间，推荐用 pb-5（对应 3rem）而非 margin-bottom
• 移动端软键盘弹出时，fixed 元素可能被顶起或错位，<meta name="viewport"> 必须存在且不含 height=device-height
• 避免在同一个元素上混用 sticky-bottom 和 fixed —— 后者会覆盖前者，且行为不可预测

最容易被忽略的坑：移动端软键盘和 Safari 视口抖动

哪怕 CSS 写对了，在 iPhone 上测试仍可能发现导航栏“悬空”或滚动卡顿。这不是代码问题，而是 iOS Safari 对 position: fixed 和 sticky 在软键盘弹出/收起时重排视口的固有限制。

• Chrome DevTools 模拟器无法复现真实键盘行为，真机测试不可跳过
• min-vh-100 在 iOS 地址栏收放时会动态变化高度，导致底部栏跳动；临时缓解可用 JS 监听 resize 重设高度，但非根治
• 如果底部栏含 <input> 或触发软键盘的交互，优先考虑改用非固定方案（如折叠式底部操作区）

真正难的不是加哪行 class，而是想清楚：你要的是「滚动时始终可见」，还是「内容少时沉底、内容多时自然跟随」——选错前提，后面全是补丁。