Bootstrap 5 中 fixed-bottom 类已被移除，需用 sticky-bottom 实现滚动时贴底，或用 position: fixed 实现绝对固定底部；sticky-bottom 失效常见于 DOM 结构不当、父容器 overflow-y: hidden 或无滚动高度；fixed 方案需预留 pb-5 空间并避免 iOS 软键盘问题。
Bootstrap 5 中没有 fixed-bottom 类，加了也不生效——不是你写错了，是它被官方彻底移除了。想让导航栏“滚动时始终贴底”，得用 sticky-bottom；想“绝对贴底不随内容滚动”，就得手动写 position: fixed 并处理留白和兼容性问题。
sticky-bottom 类为什么有时没反应
sticky-bottom 不是开关式工具类，它依赖 DOM 结构和父容器行为才能触发。常见失效原因包括：
-
nav不是其父容器的最后一个子元素（比如后面还有footer或空div） - 父容器（如
body或包裹层）设了overflow-y: hidden，直接禁用 sticky 行为 - 父容器没有可滚动高度：短页面下
body默认无溢出，sticky退化为static - 在 iOS 15.4 之前，
sticky对body或main直接生效支持不稳定，真机测试常失败
稳妥做法是套一层 <div class="d-flex flex-column min-vh-100">，再把 <nav class="navbar sticky-bottom"> 放在该容器末尾，并确保容器本身有 overflow-y: auto。
用 position: fixed 实现真·固定底部
如果必须绝对定位、不随内容滚动（比如 App 风格底部菜单），就绕过 sticky-bottom，直接上 position: fixed：
- 给
nav加样式：position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; - 它的前一个兄弟元素（如
<main>）必须预留空间，推荐用pb-5（对应 3rem）或pb-6，别用margin-bottom - 避免在
nav内放<input>或<select>—— iOS Safari 下软键盘会把它顶出视口，且无法自动回落 - 不要给
body设height: 100vh后再减去导航栏高度，容易因缩放或地址栏隐藏导致整体截断
图标+文字对齐与响应式细节
底部导航栏常配图标和文字，但直接塞 <i> 容易错位、点击区域小、小屏堆叠异常：
- 图标必须包裹在
<button>或<a>内，否则无障碍失效、触摸反馈丢失 - 统一用
fs-4控制图标大小，避免混用text-lg、h5导致行高不一致 - 推荐用
<ul class="list-group">替代<nav>，再重置.list-group-item { padding: 0.75rem 0; }，配合d-flex align-items-center justify-content-center居中 - 小屏下文字可收缩隐藏：
.list-group-item span { display: none; }+ 媒体查询控制显示逻辑
真正难的不是选哪个 class，而是分清你要的是「滚动中始终可见」还是「只在短页里沉底」。前者必须靠 sticky-bottom 或 fixed，后者才轮得到 mt-auto。混淆这两者，所有后续调试都在补漏洞。
