sticky-bottom 是唯一靠谱的定位方式，采用 position: sticky; bottom: 0 并满足父容器有明确高度、元素为最后子节点、避开 iOS 15.4 以下兼容问题；图标文字对齐须用 flex + fs-4 + bi-fw；响应式靠 CSS 媒体查询控制显隐与布局，非 JS；导航状态用 aria-current 驱动，真机测试不可替代。
sticky-bottom 是唯一靠谱的定位方式
别碰 navbar-fixed-bottom，它在 iOS Safari 和多数 Android 浏览器里一弹软键盘就悬空，不是你代码错，是 position: fixed 根本不响应视口高度变化。真机上加 padding-bottom 也救不回来，尤其页面里有 <input> 时基本必挂。
sticky-bottom 本质是 position: sticky; bottom: 0，仍属文档流，软键盘顶起视口时它会跟着上移——但前提是父容器满足三个条件：
- 必须有明确高度或可滚动区域，推荐用
<div class="d-flex flex-column min-vh-100">包裹整个页面 -
sticky-bottom元素得是该父容器的最后一个子元素（否则粘不住） - iOS 15.4 之前对
position: sticky支持不稳定，直接作用于<main>或<section>易失效，真机测试不可跳过
图标+文字对齐必须用 flex + fs-4 + bi-fw
只写 <i class="bi bi-home"></i> 首页 必然上下松散、点击热区小、小屏堆叠错位——根本原因是 inline 元素 baseline 对齐问题，不是图标库的 bug。
正确做法是：
- 图标必须包裹在
<button>或<a>内，否则语义缺失、无障碍失效、触摸反馈丢失 - 统一用
fs-4控制图标大小（Bootstrap 5.3+），避免混用text-lg、h5导致行高不一致 - Bootstrap Icons 必须加
bi-fw类（固定宽度），否则bi-home和bi-cart宽度不同，对齐会晃动 -
.list-group-item内设display: flex; align-items: center; justify-content: center;，再重置内边距：padding: 0.75rem 0;
小屏自动收缩文字靠 CSS 媒体查询，不是 JS
响应式不是靠 JS 动态删 DOM 节点，而是用 CSS 控制显隐和布局流。默认横排图标+文字，小屏（如 max-width: 576px）时隐藏文字、增大图标、改竖排更适拇指操作。
关键 CSS 片段：
.bottom-nav .list-group-item span { display: inline; }
@media (max-width: 576px) {
.bottom-nav .list-group-item span { display: none; }
.bottom-nav .list-group-item i { font-size: 1.5rem; margin-bottom: 0.25rem; }
.bottom-nav .list-group-item { flex-direction: column; }
}
别用 col-2 硬压宽度——内容溢出不会自动隐藏，还得配 text-truncate 或 overflow: hidden，徒增复杂度。
交互状态要靠 aria-current 驱动，不是 class="active"
class="active" 对屏幕阅读器不可读，也不符合 Bootstrap 5+ 推荐实践。底部导航条本质是导航控件，必须用 aria-current="step" 标记当前项。
图标变化靠伪元素实现，例如：
[aria-current="step"]::before { content: "●"; color: #0d6efd; }
[aria-current="true"]::before { content: "✓"; color: #198754; }
:not([aria-current])::before { content: counter(step); }
注意："true" 和 "step" 不可混用；所有图标尺寸必须预设 width/height 或用 font-size 控制，否则 tab 切换时 layout 波动导致卡顿。
真机测试比模拟器重要得多——Chrome DevTools 的设备模拟器不触发真实软键盘，容易误判布局是否正常。系统手势栏、iOS 地址栏、软键盘都会动态压缩视口，CSS 固定定位无法感知这些变化，这是所有 H5 页面共有的限制，不是 Bootstrap 的锅。
