sticky-bottom比fixed-bottom更可靠，因它基于position: sticky; bottom: 0，不脱离文档流、不遮内容，但需父容器有可滚动区域且nav为最后子元素；fixed-bottom已从Bootstrap 5移除，且移动端软键盘下易错位。
用 sticky-bottom 替代 fixed-bottom 更可靠
bootstrap 5.3+ 提供了 sticky-bottom 类，它基于 position: sticky; bottom: 0，比 fixed-bottom 更适合底部导航条场景。它不会脱离文档流，滚动时自然“吸附”在视口底部，且不遮挡内容——前提是父容器支持 sticky 定位。
常见错误是直接套用 fixed-bottom 后发现文字被盖住、iOS 键盘弹出时导航栏悬空。这不是代码写错，而是 fixed 在移动端对软键盘无响应，且必须手动预留 padding-bottom。
-
sticky-bottom要求父容器有明确高度或可滚动区域，例如：body { height: 100vh; overflow-y: auto; } - 若父容器是
<div class="d-flex flex-column min-vh-100">，则更稳妥，避免 iOS 15.4 之前 sticky 失效问题 <li>不要把 <code><input>或<textarea></textarea>放在sticky-bottom内部——软键盘会顶起整个视口，导致定位错乱 - 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在，且不含height=device-height这类干扰项 - 避免依赖纯 CSS 实现“永远可见”，必要时用 JS 监听
resize或focusin/focusout动态调整bottom值（仅作兜底，非首选） - 对关键操作按钮（如提交、切换），优先放在页面中部或顶部，而非完全依赖底部导航
- 导航项用
<ul class="navbar-nav"></ul>，保持语义一致性 - 图标建议用 SVG 或
<i></i>+ Font Awesome，避免图片宽高不一致导致小屏换行 - 小屏下若内容溢出，优先用
d-none d-sm-flex隐藏次要项，而不是改@grid-float-breakpoint——后者影响全局断点 - 如果必须用
fixed-bottom，请设padding-bottom: 60px（略大于导航条实际高度），并用z-index控制层级，防止遮挡弹窗或下拉菜单 - 任何依赖 JS 计算高度来动态设置
padding-bottom的方案，在 SSR 或首屏渲染阶段都不可靠 - 真正需要“滚动到底才出现”的底部导航，应考虑用 IntersectionObserver 监听 footer 进入视口，而非强行固定
小屏下底部导航条被系统栏/软键盘顶起怎么办
这不是 Bootstrap 的 bug，是所有 H5 页面共有的 viewport 行为：Android 系统手势栏、iOS 地址栏和软键盘都会动态压缩可用视口高度，而 CSS 固定定位无法感知这些变化。
真机测试比模拟器更重要——Chrome DevTools 的设备模拟器不触发真实键盘，容易误判布局是否正常。
navbar 结构里怎么加底部导航条语义
Bootstrap 的 navbar 默认用于顶部，但语义上完全可以复用其样式体系做底部导航——关键是结构清晰、不混用 navbar-fixed-bottom 这类已弃用类名。
推荐写法是用 <nav class="navbar navbar-expand-sm bg-light"></nav> 包裹，再配合 sticky-bottom，而不是强行套用旧版 navbar-fixed-bottom（Bootstrap 5 已移除该类）。
为什么不能只靠 fixed-bottom + padding-bottom 解决所有问题
静态预留 padding-bottom 只能应对固定高度的导航条，一旦遇到字体缩放、动态内容、系统 UI 变化（比如 iOS 17 的地址栏隐藏模式），就立刻失效。
更麻烦的是，fixed-bottom 会让导航条始终覆盖在最上层，即使用户滚动到页面底部，也可能盖住表单提交按钮或分页控件。
