应使用 position: fixed + bottom: 0 而非 fixed-bottom；需手动构建语义化 nav，配合 position-relative、position-absolute + top-0 start-100 translate-middle 实现稳定角标，通过路由监听同步 active 状态，并针对 iOS 加 viewport-fit=cover 和键盘时动态 padding。
底部导航菜单用 fixed-bottom 还是 position: fixed？
Bootstrap 5 默认不提供「带角标提示的底部导航」组件，fixed-bottom 类仅做基础定位，无法处理图标、角标（badge）、点击反馈或路由高亮。直接套用会遇到：图标错位、角标遮挡、iOS Safari 滚动时闪动、点击区域过小等问题。
真正可行的方式是手写一个语义清晰的 <nav>，用 position: fixed + bottom: 0 控制定位，并配合 Bootstrap 的 nav、nav-link 和 badge 构建结构：
<nav class="navbar fixed-bottom bg-white border-top">
<div class="nav w-100 justify-content-around">
<a href="#home" class="nav-link active">
<i class="bi bi-house"></i>
<span class="d-block text-xs">首页</span>
</a>
<a href="#chat" class="nav-link">
<i class="bi bi-chat"></i>
<span class="d-block text-xs">消息</span>
<span class="badge bg-danger position-absolute top-0 start-100 translate-middle">3</span>
</a>
</div>
</nav>
-
position-absolute+translate-middle是角标居右上角的关键，不能只靠right: 0 - 必须加
top-0 start-100，否则在不同字号下偏移不稳定 -
fixed-bottom会和navbar冲突（后者自带 padding），建议弃用，直接用自定义 CSS
图标用 bi 还是 fa？角标怎么避免重叠？
Bootstrap Icons（bi）体积小、无需额外 CDN，适合轻量 App 导航；Font Awesome（fa）图标更全但需加载外部资源。无论选哪个，角标（badge）默认 inline 布局，直接塞进 nav-link 会导致文字换行或图标挤压。
解决方法是让角标脱离文档流，且不干扰链接点击区域：
- 给
nav-link加position-relative（否则position-absolute角标会相对 body 定位） - 角标必须用
position-absolute+top-0 start-100 translate-middle，这是唯一稳定方案 - 避免给角标设
font-size或padding，改用text-xs（自定义类）统一控制尺寸 - 如果角标数字为
0，用 JS 动态classList.add('d-none')隐藏，别留空格占位
点击反馈和当前页高亮为什么失效？
原生 nav-link 的 active 样式只靠 class 控制，但单页应用（SPA）中路由变化不会自动更新 DOM。用户点一次没反应、再点才高亮，本质是 class 没同步。
手动管理高亮状态更可靠：
- 监听
hashchange或使用框架路由钩子（如 Vue Router 的onBeforeRouteUpdate） - 每次跳转后，清除所有
nav-link的active，再根据window.location.hash或当前 route.name 匹配目标链接 - 不要依赖
:hover做点击反馈 —— 移动端无 hover，改用:active+transition或 JS 添加临时 class - 给
nav-link加touch-action: manipulation，减少 iOS 点击延迟
为什么 iOS 上底部导航会“被键盘顶起”或滚动错位？
iOS Safari 的 viewport 行为特殊：软键盘弹出时，fixed 元素可能被错误重定位，或页面缩放导致导航条拉伸。这不是 Bootstrap bug，而是 WebKit 对 fixed 的实现限制。
关键缓解措施：
- 在
<head>中确保 viewport 设置为：<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> - 键盘弹出时，监听
focusin事件，临时给body加style="padding-bottom: 60px"（等于导航高度），防止内容被遮挡 - 禁用
scroll-behavior: smooth（尤其在 iOS 15+），它和fixed底部栏存在渲染竞争 - 避免在导航内部放
input或textarea—— 底部固定栏里放输入框本身就是反模式
角标位置、键盘适配、路由同步这三处最容易被忽略，尤其是 translate-middle 缺失时角标在不同设备上飘移，调试时得真机连 Safari Web Inspector 看 computed position 才能确认。
