优先选 sticky-bottom，因其不脱离文档流、不遮内容、不被软键盘顶飞；而 navbar-fixed-bottom 是 position: fixed，在 iOS Safari 等浏览器中 input 聚焦时易悬空或挤出视口，需手动为 body 加 padding-bottom 防遮盖。
用 navbar-fixed-bottom 还是 sticky-bottom？
优先选 sticky-bottom（bootstrap 5.3+），不是因为它“新”，而是它不脱离文档流、不遮内容、不被软键盘顶飞。而 navbar-fixed-bottom 是纯 position: fixed，在 ios safari 和多数 android 浏览器里，input 聚焦弹出软键盘时，导航栏直接悬空或被挤出视口——这不是你代码写错了，是浏览器 viewport 行为导致的。
若必须用 navbar-fixed-bottom，得手动给 加 padding-bottom（值 ≥ 导航栏高度），否则正文最后一行文字/按钮会被盖住；而 sticky-bottom 无此问题，但要求父容器可滚动且有明确高度（比如 min-vh-100 包裹）。
图标 + 文字怎么对齐又响应式？
别把图标塞进 <li> 就完事。常见错误：只放 <i class="fa fa-home"></i>，结果图标上下松散、点击区域小、小屏堆叠错位。
- 图标必须包裹在
<a></a>或<button></button>内，否则语义缺失、无障碍失效、触摸反馈丢失 - 统一用
fs-4（Bootstrap 5.3+）或font-size: 1.25rem控制图标大小，避免混用text-lg、h5等导致高度不一致 - 用
list-group替代nav：默认垂直堆叠、带 hover 状态、支持active，更贴合底部菜单行为 - 重置内边距：
.list-group-item { padding: 0.75rem 0; }，再加display: flex; align-items: center; justify-content: center;居中图标 - 文字和图标共存时，用
d-flex flex-column text-center布局；收缩仅留图标时，用 CSS 类控制.sidebar-collapsed .list-group-item span { display: none; }
小屏下图标文字怎么自适应显示？
不是靠 JS 切换 DOM，而是用 CSS 媒体查询 + Flex 控制显隐和间距。例如默认显示图标+文字，max-width: 576px 时隐藏文字、增大图标尺寸、收紧间距。
关键点：
- 文字必须用
<span></span>包裹，不能直接写在<a></a>里，否则无法单独控制 - 图标用
fa-fw（Font Awesome 固定宽度类），防止不同图标宽度差异导致对齐晃动 - 小屏下用
flex-column改为竖排图标+文字（适合拇指操作），而非强行横排截断 - 避免用
col-2等栅格硬压宽度——内容溢出或文字被截断时，CSS 不会自动隐藏，需配合text-truncate或overflow: hidden
为什么真机测试比 DevTools 更重要？
Chrome DevTools 的设备模拟器不会触发真实软键盘，也模拟不了 iOS Safari 的 viewport 缩放逻辑和地址栏收起行为。你在模拟器里看到的 sticky-bottom 正常，不代表真机上不悬空；fixed-bottom 在模拟器里没遮挡，不代表用户点 input 时底部菜单还在原位。
必须在 iOS 和主流 Android 机型上实测，重点验证：
- 点击 input 后，底部菜单是否仍完整可见
- 页面滚动时，
sticky-bottom是否随容器自然吸附到底部（不是跳动或卡顿） - 横屏切换后，图标+文字布局是否重排合理，没有重叠或错位
真正麻烦的从来不是写几行 class，而是软键盘弹起那一刻，viewport 高度突变、滚动锚点偏移、sticky 失效——这些没法靠 CSS 静态兜底，得结合业务场景做降级（比如小屏改用 modal 弹出式底部菜单）。
