sticky-bottom是唯一靠谱的固定方案，需父容器可滚动且有明确高度、sticky元素为最后一个子元素；图标文字垂直居中需同级且父容器d-flex+align-items-center；list-group更适配底部菜单；小屏响应式应纯CSS实现。
sticky-bottom 是唯一靠谱的固定方案
用 sticky-bottom，别碰 navbar-fixed-bottom 或 position: fixed。后者在 iOS Safari 和多数 Android 浏览器里， 聚焦弹出软键盘时，导航栏会被顶飞或悬空——这不是你代码写错，是 viewport 行为限制。
启用 sticky-bottom 有三个硬性前提：
- 父容器必须可滚动且有明确高度，推荐套一层
<div class="d-flex flex-column min-vh-100"> -
sticky-bottom元素得是该父容器的**最后一个子元素**（否则粘不住） - iOS 15.4 之前对
position: sticky支持不稳定，真机测试不可跳过
图标+文字垂直居中失败？先看父容器和 vertical-align
图标总比文字低半截，不是 Bootstrap 的 bug，是 HTML 行内元素默认按 baseline 对齐的自然行为。Bootstrap Icons v1.10+ 内置了 vertical-align: -.125em，但这个值只作用于 <i> 自身，一旦父容器用了 align-items-start 或图标被包进 <p>、<strong>，就立刻失效。
正确做法：
- 确保图标和文字是同级元素，且它们的**直接父容器**同时带
d-flex和align-items-center - 若用 SVG 图标（包括 Bootstrap Icons 的
<i>内部<svg>），必须重置干扰：i.bi svg { vertical-align: inherit; } - 避免给图标加
margin-top: -2px这类像素级 hack——换字号就崩
list-group 比 nav 更适合底部菜单
别把图标塞进 <nav> 或 <ul class="navbar-nav"> 就完事。常见错误是只写 <i class="bi bi-home"></i> 首页，结果点击区域小、小屏堆叠错位、无障碍语义缺失。
改用 list-group 的理由很实在：
- 默认垂直堆叠，天然适配底部菜单行为
- 自带
:hover/.active状态，无需额外 JS 控制 - 每个
<li class="list-group-item">可独立包裹<button>，语义完整、触摸反馈可靠 - 重置内边距更干净：
.list-group-item { padding: 0.75rem 0; }，再加d-flex align-items-center justify-content-center
小屏自动收缩文字、放大图标，纯靠 CSS 媒体查询
响应式不是靠 JS 动态增删 DOM 节点。默认横排图标+文字，小屏（如 max-width: 576px）时隐藏文字、增大图标、改为竖排布局——全部用 CSS 控制。
关键点：
- 文字必须用
<span>包裹，不能直接写在<button>里，否则无法单独控制显隐 - 图标必须加
bi-fw（Bootstrap Icons 固定宽度类），防止不同图标宽度差异导致对齐晃动 - 小屏下用
flex-direction: column，比强行横排更适配拇指操作 - 别用
col-2等栅格硬压宽度——内容溢出时不会自动隐藏，得配合text-truncate或overflow: hidden
容易被忽略的是：同一套对齐规则在 font-size: 0.875rem 和 1.25rem 下表现可能不一致。建议抽成复用类（如 .icon-inline），并在项目根 CSS 里统一重置所有图标字体的 vertical-align 行为。
