最稳方案是用 nav + list-group 实现带图标侧边菜单，图标用 bootstrap icons 内联 svg，list-group-item 必须加 action 类，选中项加 active 类，注意图标尺寸对齐与无障碍语义。
用 nav + list-group 实现带图标的侧边菜单最稳
Bootstrap 5 默认不内置图标，但和 list-group 配合使用是目前最轻量、兼容性最好、结构语义最清晰的方案。别硬套 navbar 或自定义 dropdown，它们本就不是为垂直侧边栏设计的。
常见错误是把 navbar-nav 塞进 flex-column 容器里，结果响应式断点错乱、悬停状态丢失、移动端折叠逻辑失效。
- 图标统一用
<i class="bi bi-house"></i>这类 Bootstrap Icons 的 SVG 内联写法，避免额外请求字体文件或 JS 加载延迟 -
list-group-item必须加action类（如list-group-item-action）才能触发 hover/focus 样式，否则图标和文字点击无反馈 - 若需当前选中高亮，直接给对应项加
active类——list-group原生支持，不用 JS 监听路由
bootstrap-icons 引入方式直接影响图标加载时机
图标不显示？大概率是引入顺序或路径错了。Bootstrap Icons 不是 CSS sprite，而是独立的 SVG symbol 集合，必须确保 bootstrap-icons.css 在 Bootstrap 主 CSS 之后、JS 之前加载。
推荐做法：用 CDN 同步加载，且禁用预加载（rel="preload" 可能导致图标渲染滞后）：
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
本地部署时注意路径：如果 bootstrap-icons.css 里引用的 fonts/bootstrap-icons.woff2 路径不对，图标会变成方块。检查浏览器 Network 面板里是否 404 了字体文件。
图标尺寸与行高不匹配会导致文字偏移
默认 bi 图标是 1em，但 list-group-item 行高是 1.5，图标会视觉下沉。别用 vertical-align: middle 硬调——它依赖父元素 line-height，而 Bootstrap 5 的 flex 布局下容易失效。
- 稳妥做法：给图标加
align-text-top或align-text-bottom工具类，配合me-2控制右侧间距 - 更可控的方式：用
font-size: 1.125rem（即fs-5）统一图标大小，再微调margin-top: -2px对齐文字基线 - 绝对不要用
transform: translateY()，会影响屏幕阅读器对焦点位置的识别
导航图标在小屏折叠后容易被截断
Bootstrap 的 offcanvas 侧边栏默认宽度是 min-width: 260px，但图标 + 文字组合在窄屏（比如 iPhone SE）上可能撑出容器，造成横向滚动或图标溢出。
解决思路不是改宽度，而是控制内容流：
- 给
list-group加overflow-x: hidden，防止图标外溢 - 文字用
text-truncate，图标用flex-shrink-0，保证图标不缩、文字自动省略 - 如果用
offcanvas，务必在offcanvas-body外层再包一层px-3，否则图标紧贴边缘，视觉拥挤
真正难处理的是图标语义缺失问题：纯图标菜单（无文字）在无障碍场景下几乎不可用，aria-label 必须手动补全，而且不能只靠 title 属性——iOS VoiceOver 会忽略它。
