Bootstrap 5.3+ 推荐用 sticky-bottom 替代已移除的 fixed-bottom，其本质为 position: sticky; bottom: 0，不脱离文档流、不遮内容，但需 nav 为父容器最后一个子元素，且父容器须有可滚动高度（如 min-vh-100 + overflow-y: auto），iOS 15.4 前支持不稳定，真机测试必不可少。
用 sticky-bottom 替代 fixed-bottom 更可靠
bootstrap 5.3+ 提供了 sticky-bottom 类，它本质是 position: sticky; bottom: 0，不会脱离文档流，滚动时“粘”在视口底部，且不遮挡内容。而 fixed-bottom 是绝对定位，必须手动预留 padding-bottom，否则正文最后一行文字会被盖住。
关键前提：父容器需有明确高度或可滚动区域。若直接用在 上，需确保 body { height: 100vh; overflow-y: auto; }；更稳妥做法是包裹一层 <div class="d-flex flex-column min-vh-100">，再把 <code>sticky-bottom 放在子元素里。
- iOS 15.4 之前对
sticky支持不稳定，尤其在<main></main>或<section></section>直接使用时可能失效 -
sticky-bottom在小屏上不会被软键盘顶起——因为它仍属文档流，键盘弹出时页面重排会自然抬升它 - 别给
sticky-bottom元素设z-index过高，容易压住offcanvas或modal的关闭按钮
fixed-bottom 必须配静态 padding-bottom
一旦选 fixed-bottom，就必须为主要内容区（比如 <main></main>）设置固定高度的底部内边距，例如 pb-5（对应 3rem），否则导航栏会盖住最后一段文字、按钮或表单提交区。
这个值不能靠 JS 动态计算——移动端软键盘高度不可靠，且 resize 事件在 iOS 上常延迟或不触发。静态兜底是唯一稳定方案。
- 推荐用
pb-5或pb-6（Bootstrap 5 默认 spacing scale），而非像素值，保证响应式一致性 - 若底部菜单含
<input>或<select></select>，fixed-bottom在 iOS Safari 中几乎必然被软键盘顶起，导致“悬空”，此时应放弃 fixed - 不要试图用
viewportmeta 的height=device-height补救——它已被现代浏览器废弃，反而引发缩放异常
真机测试比模拟器更重要
Chrome DevTools 的设备模拟器不会触发真实软键盘行为，页面在模拟器中看起来正常，一到真机就发现底部菜单被顶出视口、输入框失焦、甚至整个页面被拉伸变形。
必须在 iOS 和主流 Android 机型上实测：点开任意 <input>，观察底部菜单是否仍可点击、是否遮挡输入框、键盘收起后页面是否回弹到位。
- iOS Safari 对
fixed+input的组合最敏感，尤其在微信内置浏览器中表现更差 - Android 部分厂商浏览器（如华为、小米）会强制压缩 viewport 高度，导致
fixed-bottom偏移 - 如果项目必须支持老 iOS（sticky-bottom 要加降级 fallback：用 JS 检测 sticky 支持性，不支持时才切回
fixed-bottom+ 强制pb-6
搜索框放在底部菜单里要防 viewport overflow
如果底部菜单里嵌了搜索 <form></form>，iOS Safari 小屏下极易触发 viewport overflow：右侧紧贴屏幕边缘的 <input> 会让浏览器误判为需要横向滚动，结果键盘弹出瞬间失焦、输入框闪退。
解决方法很简单：给搜索框外层或 <input> 本身加 me-2（右 margin 0.5rem），提供安全缓冲区。
- 别用
ms-auto包裹整个<form></form>——它会在小屏下把搜索框挤到 offcanvas 外，DOM 根本不渲染 - 若搜索框需左对齐，改用
ms-2，不是已废弃的ml-2 -
input-group内部已有间距，外层再加px-3会导致错位，只加me-2即可
pb-6 比猜 keyboard height 更稳，加 me-2 比调 viewport meta 更有效。
