用 sticky-bottom 替代 fixed-bottom 是唯一可行路径：bootstrap 5.3+ 已移除 navbar-fixed-bottom，fixed-bottom 在软键盘弹出时会错位悬空；sticky-bottom 基于 position: sticky; bottom: 0，需父容器 d-flex flex-column min-vh-100 且 nav 为最后一个子元素。
用 sticky-bottom 替代 fixed-bottom 是唯一可行路径
Bootstrap 5.3+ 已彻底移除 navbar-fixed-bottom 类，硬加它不会生效。这不是你漏写了 class，而是框架主动弃用了 position: fixed 这种在移动端软键盘弹出时必然错位的方案。真机测试会发现：iOS Safari 或 Android Chrome 下，<input> 聚焦后，fixed-bottom 导航栏直接悬空或被顶出视口——这是浏览器 viewport 行为，不是代码 bug。
必须改用 sticky-bottom：它基于 position: sticky; bottom: 0，不脱离文档流、不遮内容、软键盘弹起时仍能“吸附”在滚动容器底部。
- 父容器必须可滚动且有明确高度，推荐套一层
<div class="d-flex flex-column min-vh-100"> <li> <code>sticky-bottom元素必须是该父容器的**最后一个子元素**（否则粘不住） - iOS 15.4 之前对
sticky支持不稳定，真机测试不可跳过 - 不要把导航条直接塞进
——在 iOS 上对sticky支持极差，尤其 15.4 之前 - 必须包裹一层容器：
<div class="d-flex flex-column min-vh-100"> <main>...</main><nav class="navbar sticky-bottom">...</nav> </div> -
<nav></nav>必须是该div的**最后一个子元素**；如果后面还有<footer></footer>或其他块，sticky-bottom会退化为普通定位 - 确保图标和文字是同级元素，且它们的**直接父容器**同时带
d-flex和align-items-center - Bootstrap Icons 推荐用
fs-4统一控制大小，避免混用text-lg、h5等导致高度不一致 - Font Awesome 图标务必加
fa-fw（fixed width），防止不同图标宽度差异引发横向晃动 - 别把图标直接丢进
<nav></nav>，应包裹在<button class="nav-link"></button>或<a class="nav-link"></a>内，保障语义与触摸反馈 - 优先用
<ul class="list-group list-group-horizontal"></ul>替代navbar-nav；list-group原生支持垂直/水平切换、hover 状态、active样式，更贴合底部菜单行为 - 小屏收缩仅留图标：用媒体查询控制文字显示，例如
@media (max-width: 576px) { .bottom-nav-item span { display: none; } } - 图标尺寸统一用
fs-4，小屏可叠加fs-5提升点击区域，避免手指误触 - 绝对不要在
sticky-bottom内放<input>或<textarea></textarea>—— 键盘弹出会压缩视口，导致整个导航条被顶飞
结构必须满足三个硬性前提
即使写了 sticky-bottom，布局也会失效，常见原因是 DOM 结构没对齐。它不像 fixed 那样“无脑挂”，而是严格依赖父级上下文。
图标+文字对齐不能靠 vertical-align
图标总比文字低半截？这不是 Bootstrap 或 Font Awesome 的问题，是 HTML 行内元素默认按 baseline 对齐的自然行为。加 vertical-align: middle 或 margin-top 属于像素级 hack，换字号就崩。
小屏响应式要靠纯 CSS 控制，别碰 JS
底部菜单在小屏上堆叠错乱？通常是因为用了 navbar-nav 这类为顶部设计的弹性布局，它在小屏下默认转为折叠菜单，反而破坏底部语义。
最易被忽略的是父容器高度与子元素顺序：哪怕 class 全对，只要 <nav></nav> 不是 min-vh-100 容器的最后一个子元素，sticky-bottom 就不会触发。真机测一次比写十行 JS 更有效。
