Bootstrap 5.3+ 已移除 fixed-bottom，应使用 sticky-bottom；其生效需满足 nav 为父容器最后一个子元素、父容器有可滚动高度（如 min-vh-100）、无 overflow-y: hidden，且 iOS 15.4 前需真机测试。
Bootstrap 5.3+ 里没有 fixed-bottom，直接加这个类完全无效——不是你写错了，是框架本身已移除。真要实现类似 App 的底部固定导航菜单，sticky-bottom 是目前最可靠、语义最准的方案，但必须满足几个硬性条件，否则它就“不 sticky”。
为什么 sticky-bottom 在页面上没反应
它不是“开了开关就生效”的工具类，而是依赖 DOM 结构和父容器行为的 CSS 行为。常见失效原因：
-
nav不是其**直接父容器的最后一个子元素**（比如前面还有footer或空div） - 父容器设了
overflow-y: hidden或position: relative，直接禁用 sticky - 父容器没高度，比如
body没设min-vh-100或height: 100vh，内容短时 sticky 无处可“吸” - iOS Safari 15.4 之前对
body上的 sticky 支持极差，尤其在main或section里直接用会静默失效
推荐结构：
<body class="d-flex flex-column min-vh-100"> <main class="flex-grow-1"></main> <nav class="navbar sticky-bottom"></nav> </body>注意：
nav 必须紧贴 body 底部，中间不能插其他兄弟节点。
图标+文字如何对齐且小屏自适应
别把图标直接塞进 nav-link 就完事。常见问题：图标上下松散、小屏堆叠错位、点击热区太小。
- 图标必须包裹在
button或a内，否则无障碍缺失、触摸反馈丢失 - 统一用
fs-4控制图标大小，避免混用text-lg或像素值导致行高不一致 - 文字必须用
span包裹，才能单独控制显隐：<a href="#"><i class="fa fa-home fa-fw"></i><span>首页</span></a> - 小屏下隐藏文字、放大图标、收紧间距，靠 CSS 媒体查询：
@media (max-width: 576px) { .nav-link span { display: none; } .nav-link i { font-size: 1.5rem; margin: 0; } } - 竖排布局更适合拇指操作：
flex-column text-center替代默认横排，避免强行压缩导致文字截断
移动端软键盘弹出时菜单被顶起怎么办
这是 position: fixed 的固有缺陷，sticky-bottom 能规避——因为它仍在文档流中，键盘弹出会触发页面重排，整个视口自然上抬，菜单跟着动。
- 绝对不要在
sticky-bottom区域放<input>、<select>或任何聚焦触发软键盘的元素 - 别试图用
viewport的height=device-height补救——已被现代浏览器废弃，反而引发缩放异常 - 真机测试比模拟器重要：Chrome DevTools 不模拟真实软键盘行为，页面在模拟器里看着正常，一到 iOS 真机就悬空或失焦
- 如果必须放输入框，考虑把底部菜单临时隐藏（用 JS 切换
d-none），而非硬扛定位冲突
真正容易被忽略的点是：sticky-bottom 的“粘性”不是无条件的，它只在滚动到达容器底部时才触发；而 App 风格的底部菜单要求“始终可见”，哪怕页面内容很短——这就必须靠 min-vh-100 + d-flex flex-column 把容器撑满视口，否则它就只是个普通 nav。
