优先用 sticky-bottom，因其不脱离文档流、不遮内容、软键盘弹出时不悬空；而 navbar-fixed-bottom 是 position: fixed，在 iOS Safari 等浏览器中 input 聚焦时易被顶飞，需手动加 padding-bottom 防遮盖且含输入框时几乎必然失效。
优先用 sticky-bottom，不是因为它“新”，而是它不脱离文档流、不遮内容、软键盘弹出时不会悬空——navbar-fixed-bottom 在 iOS Safari 和多数 Android 浏览器中一触发输入框就会被顶飞，这不是你代码写错了，是浏览器 viewport 行为导致的。
为什么 sticky-bottom 比 fixed-bottom 更可靠
sticky-bottom 本质是 position: sticky; bottom: 0，仍属文档流，滚动时自然吸附到底部，且页面重排（比如软键盘弹出）会把它一起抬升；而 fixed-bottom 是纯绝对定位，完全脱离文档流，必须手动给 <main></main> 或 加 pb-5 防遮盖，且一旦里面放了 <input>，真机上几乎必然失效。
- 父容器必须有可滚动高度：推荐用
<div class="d-flex flex-column min-vh-100"> 包裹整个页面，再把 <code>sticky-bottom放在子元素里 - iOS 15.4 之前对
position: sticky支持不稳定，尤其直接作用于<main></main>或<section></section>时，真机测试必不可少 - 别给
sticky-bottom元素设过高的z-index，否则可能压住offcanvas或modal的关闭按钮 - 图标必须包裹在
<button></button>或<a></a>内，否则语义缺失、无障碍失效、触摸反馈丢失 - 统一用
fs-4（Bootstrap 5.3+）控制图标大小，避免混用text-lg、h5导致行高不一致 - 用
list-group替代nav：默认垂直堆叠、自带 hover/active 状态，更贴合底部菜单行为 - 重置内边距：
.list-group-item { padding: 0.75rem 0; }，再加d-flex align-items-center justify-content-center居中图标 - 文字和图标共存时，用
d-flex flex-column text-center；收缩仅留图标时，用 CSS 类控制：.sidebar-collapsed .list-group-item span { display: none; } - 图标必须加
bi-fw（Bootstrap Icons 固定宽度类），防止不同图标宽度差异导致对齐晃动 - 小屏下用
flex-column改为竖排图标+文字（适合拇指操作），而非强行横排截断 - 避免用
col-2等栅格硬压宽度——内容溢出或文字被截断时，CSS 不会自动隐藏，需配合text-truncate或overflow: hidden - 文字必须用
<span></span>包裹，不能直接写在<button></button>里，否则无法单独控制显隐和样式
图标+文字怎么对齐又响应式
别把图标直接塞进 <nav></nav> 或 <ul></ul> 就完事。常见错误是只写 <i class="bi bi-home"></i>，结果图标上下松散、点击区域小、小屏堆叠错位。
小屏下图标文字怎么自适应显示
不是靠 JS 切换 DOM，而是用 CSS 媒体查询 + Flex 控制显隐和间距。例如默认显示图标+文字，max-width: 576px 时隐藏文字、增大图标尺寸、收紧间距。
最常被忽略的一点：Bootstrap Icons 字体必须显式引入，只加载 Bootstrap CSS 文件，<i class="bi bi-home"></i> 会显示为空白或方块——不是图标写错了，是字体资源根本没加载。
