sticky-bottom更可靠，因其基于position: sticky; bottom: 0，仍属文档流，软键盘弹出时页面重排会自然抬升；而navbar-fixed-bottom是纯fixed定位，在iOS Safari等浏览器中易悬空或被挤出视口，且必须手动为内容区加pb-5等静态留白防遮盖。
sticky-bottom 为什么比 navbar-fixed-bottom 更可靠
因为 sticky-bottom 是 position: sticky; bottom: 0，仍属文档流，软键盘弹出时页面重排会自然抬升它；而 navbar-fixed-bottom 是纯 position: fixed，在 iOS Safari 和多数 Android 浏览器中， 聚焦后导航栏大概率悬空或被挤出视口——这不是代码错，是浏览器 viewport 行为限制。
用 navbar-fixed-bottom 必须手动给主要内容区（如 <main></main>）加静态 pb-5 或 pb-6，否则最后一行文字/按钮会被盖住；sticky-bottom 无此负担，但有硬性前提：
-
nav必须是其**直接父容器的最后一个子元素**（前面不能有footer、空div或其他兄弟节点） - 父容器需有明确高度且可滚动，推荐包裹一层
<div class="d-flex flex-column min-vh-100"> - iOS 15.4 之前对
sticky支持不稳定，真机测试不可跳过
图标+文字对齐不居中？别碰 margin 和 vertical-align
常见错误是只写 <i class="fas fa-home"></i>首页，结果图标上浮、点击热区小、小屏堆叠错位。根本原因是 inline 元素 baseline 对齐问题，不是 Bootstrap 或 Font Awesome 的 bug。
正确做法：
- 图标必须包裹在
<a>或<button>内，否则语义缺失、无障碍失效、触摸反馈丢失 - 统一用
fs-4控制图标大小（Bootstrap 5.3+），避免混用text-lg、h5或像素值导致行高不一致 - Font Awesome 图标加
fa-fw类（固定宽度），防止不同图标宽度差异导致对齐晃动 -
.list-group-item设display: flex; align-items: center; justify-content: center;，再重置内边距：padding: 0.75rem 0;
小屏下图标文字怎么自动收缩？别写 JS 切换 DOM
响应式不是靠 JS 动态增删文字节点，而是用 CSS 控制显隐和布局流。默认横排图标+文字，小屏（如 max-width: 576px）时隐藏文字、增大图标、收紧间距。
关键点：
- 文字必须用
<span>包裹，不能直接写在<a>里，否则无法单独控制显隐 - 小屏改用
flex-direction: column竖排布局，比强行横排更适配拇指操作 - 避免用
col-2栅格硬压宽度——内容溢出时不会自动隐藏，得配text-truncate或overflow: hidden
示例 CSS：
@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; }
}
为什么 sticky-bottom 在页面上没反应
它不是“开了开关就生效”的工具类，而是依赖 DOM 结构和父容器行为的 CSS 行为。最容易被忽略的是：父容器设了 overflow-y: hidden 或 position: relative，会直接禁用 sticky；内容太短时，父容器没高度，“粘”无可粘。
推荐结构：
<body class="d-flex flex-column min-vh-100"> <main class="flex-grow-1"></main> <nav class="navbar sticky-bottom"></nav> </body>
注意：nav 必须紧贴 body 底部，中间不能插任何兄弟节点；也别给 sticky-bottom 加 z-index，容易压住 offcanvas 或 modal 的关闭按钮。
