手机端底部导航栏不贴底的根源是 fixed 定位在 iOS/Android WebView 中受 viewport 缩放、软键盘弹出及 vh 动态变化影响；需检查 viewport 设置、避免 height:100%、使用 env(safe-area-inset-bottom)、禁用 scroll-behavior 并监听 resize 修复闪动，同时优化触摸热区与图标对齐。
底部固定导航栏在手机端不贴底？检查 position: fixed 和 viewport 设置
手机端底部导航栏“悬空”或被键盘顶起，大概率不是 Bootstrap 本身的问题，而是 fixed 定位在 iOS Safari 或 Android WebView 中受 viewport 缩放、软键盘弹出、页面高度计算异常影响。Bootstrap 的 .fixed-bottom 类只是加了 position: fixed; bottom: 0;，但没处理移动端的特殊行为。
实操建议：
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在且无user-scalable=no或maximum-scale干扰 - 避免给
或设height: 100%;或min-height: 100vh;—— 在 iOS 上vh会随地址栏隐藏/显示动态变化，导致fixed元素错位 - 用
bottom: env(safe-area-inset-bottom);适配刘海屏和 Home Indicator（iOS 11.2+）
用 Bootstrap 5 的 .navbar + .fixed-bottom 实现基础结构
Bootstrap 5 不再依赖 jQuery，直接用原生类组合即可。关键不是“怎么加”，而是“加在哪”和“加了之后要不要覆盖默认样式”。
示例结构（放在 最末尾，紧贴闭合标签前）：
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-bottom">
<div class="container-fluid">
<a class="navbar-brand" href="#">首页</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bottomNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="bottomNav">
<div class="navbar-nav ms-auto">
<a class="nav-link active" href="#">订单</a>
<a class="nav-link" href="#">我的</a>
</div>
</div>
</div>
</nav>
注意点：
-
.fixed-bottom必须作用于<nav></nav>本身，不能套在 wrapper div 里 - 如果用了
.navbar-expand-lg，小屏下默认折叠 —— 手机端通常要改成.navbar-expand-sm或直接删掉，让链接常显 -
bg-light在深色模式下可能对比度不足，建议加data-bs-theme="dark"或自定义背景色
点击跳转后导航栏闪动或位置偏移？禁用 scroll-behavior 并监听 resize
部分安卓浏览器在锚点跳转或 history.pushState 后会触发 body 滚动，导致 fixed 元素短暂脱离底部；iOS Safari 在键盘收起时也会重算视口高度。
解决思路不是阻止跳转，而是稳定定位上下文：
- 给
加style="scroll-behavior: auto;"（Bootstrap 5 默认是smooth，会加剧闪动） - 在 JS 中监听
window.addEventListener('resize', ...)，检测window.innerHeight变化，必要时强制重绘导航栏（例如nav.style.transform = 'translateZ(0)'） - 避免在导航栏内使用
<input>或<textarea></textarea>—— 软键盘弹出会挤压视口，fixed元素实际位置变成“视口底部”，而非“页面底部”
需要图标+文字且点击反馈明显？别只靠 .nav-link，补上触摸反馈和图标对齐
手机端手指操作区域至少 44×44px，Bootstrap 默认的 .nav-link padding 太小，且无 active 状态视觉反馈。
推荐做法：
- 用
<i></i>或<svg></svg>替代文字图标，配合font-size: 1.25rem;和line-height: 1;控制垂直居中 - 给每个
.nav-link加style="padding: 0.75rem 0.5rem; min-width: 60px;"，确保点击热区足够 - 添加 CSS 类处理按下态：
.nav-link:active { opacity: 0.7; }（iOS Safari 需要-webkit-tap-highlight-color: transparent;关闭灰色遮罩） - 如果用 Font Awesome，记得加载
fa-solid版本并设fa-fw保证图标等宽对齐
真正难的不是写出来，是让所有机型都稳稳停在底部 —— 尤其是微信内置浏览器和某些国产安卓 WebView，它们对 env(safe-area-inset-bottom) 支持不一致，有时得靠 JS 动态注入 padding-bottom 补偿。
