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