sticky-bottom + :active 是底部栏唯一可靠组合，因 sticky-bottom 保持文档流、随软键盘上抬，而 fixed-bottom 已被移除且易悬空；需确保 nav 为父容器末子元素、父容器有滚动高度，并显式定义 :active 缩放与 transition。
用 sticky-bottom + :active 伪类是最稳的组合，不是加个 fixed-bottom 再套个 btn 类就能有反馈——后者在 iOS 软键盘弹出时会悬空，且点击态常被覆盖或失效。
为什么 sticky-bottom 是底部栏的唯一可靠选择
它本质是 position: sticky; bottom: 0，仍属文档流，软键盘弹出时页面重排，整个视口上抬，底部栏跟着动；而 fixed-bottom 在 Bootstrap 5.3+ 已移除，硬加无效。但 sticky-bottom 生效有硬前提：
-
nav必须是父容器的最后一个子元素（比如直接放在<body>底部，前面不能有footer或空<div>） - 父容器要有可滚动高度，推荐包裹一层
<div class="d-flex flex-column min-vh-100"> - iOS 15.4 之前对
sticky支持不稳定，真机测试不可跳过
怎么让底部按钮有真实点击反馈（不只是变色）
默认 btn 类的 :active 缩放效果容易被全局 CSS 覆盖（比如 * { transition: none !important; }），必须显式重写：
- 给每个底部按钮加
class="btn btn-sm py-3 px-4"（py-3和px-4保证拇指热区 ≥ 48px） - 在 CSS 中定义：
.bottom-nav .btn:active { transform: scale(0.96); transform-origin: center; } - 必须同时声明
transition: transform 0.15s ease在常态规则里，否则缩放突兀 - 别只依赖
:active：iOS Safari 上触控:active持续时间极短，建议额外加.btn:focus { outline: none; }防止键盘聚焦干扰
图标+文字按钮的点击区域和对齐陷阱
常见错误是把 <i class="fa fa-home"></i>首页 直接塞进 <a>，结果图标上浮、点击热区小、小屏堆叠错位：
- 图标必须包裹在
<button>或带role="button"的<a>内，否则无障碍失效、触摸反馈丢失 - 统一用
fs-4控制图标大小，避免混用text-lg或像素值导致行高不一致 - 文字用
<span>包裹，小屏下靠媒体查询隐藏：@media (max-width: 576px) { .bottom-nav .btn span { display: none; } } - 按钮内用
flex-column text-center替代横排，更适配拇指操作，避免栅格硬压宽度引发溢出
波纹效果在底部栏上要慎用
CSS 波纹（::after 圆形扩散）在底部固定栏上容易溢出或遮挡内容，尤其当父容器没设 overflow: hidden 时：
- 如果非要加，必须给按钮加
position: relative; overflow: hidden; - 波纹尺寸按实际按钮宽高动态设，比如
width: 120px; height: 120px;（不是固定200px） - 移动端真机测试时，
:active常不触发，得用 JS 补充：touchstart添加临时类，touchend移除 - 更稳妥的做法是放弃波纹，专注
scale+box-shadow变化，视觉清晰、兼容性好
最易被忽略的是：别在 sticky-bottom 区域放任何 <input> 或 <select> ——软键盘一弹，整个视口重排，定位就乱了。底部栏只做导航，表单操作优先放中部或顶部。
