在列表组项中插入 Bootstrap 图标需引入 CDN 链接，使用 bi-xxx 类名，搭配 align-middle 和间距类（如 me-2）；链接型列表组须用 包裹 并添加 list-group-item-action 类，禁用时用 disabled 类并移除 href 或阻止默认行为。
怎么在列表组项里插入 Bootstrap 图标
直接在 .list-group-item 内部写 <i></i> 标签即可，前提是已正确引入 bootstrap icons 库。别漏掉 cdn 链接，否则图标只显示空白方块。
- 必须在
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
- 图标类名格式固定为
bi-xxx（如 bi-house、bi-envelope），不能写成 icon-house 或漏掉 bi- 前缀
- 图标默认是行内元素，和文字对齐可能偏上，加
align-middle 类可修正：<i class="bi-house align-middle me-2"></i>首页
- 如果用的是 Bootstrap 5.3+ 且项目同时引入了 Font Awesome，注意 CSS 优先级冲突——Bootstrap Icons 的
i 标签样式可能被覆盖，此时显式加 font-family: 'bootstrap-icons' !important 能救急（但建议统一图标源）
带图标的链接型列表组怎么写才不崩 hover 效果
用 <div class="list-group"> 包裹 <code>@#@#@#@#@#@#@#@#@#@0
list-group-item-action 必须加在 <a></a> 上，不是加在 <div> 上
<li>禁用某一项时，不要用 <code>disabled 属性（<a></a> 不支持），而要用 class="list-group-item list-group-item-action disabled"，并确保移除 href 或设为 href="#" onclick="return false" 防止跳转
图标大小建议统一用 fs-4（10px）或 fs-5（rem 比例更稳），避免用像素值导致响应式错位
图标位置不对、间距太挤怎么办
图标默认紧贴文字，没有自动留白，必须手动加间距类，否则视觉拥挤、可读性差。
- 推荐右图标用
ms-2（margin-start），左图标用 me-2（margin-end），比写 margin-right: 0.5rem 更符合 Bootstrap 语义
- 如果图标在文字右侧（如“设置 ”），记得用
ms-1，不是 me-1——方向反了会导致图标跑到最右边甚至换行
- 水平列表组（
list-group-horizontal）中图标容易上下错位，此时给 <i></i> 加 align-self-center 可强制垂直居中
- 别依赖图标自带的宽高，所有尺寸控制都走
fs-* + align-middle 组合，否则在 Safari 或旧版 Edge 里容易塌陷
React 项目里用 React-Bootstrap 怎么加图标
React-Bootstrap 的 ListGroup.Item 是组件，不能直接往里面塞原生 <i></i> 标签，得用 as 属性降级或包裹原生 HTML。
- 简单方案：用
as="div" 让它渲染为普通 <div>，再手动加图标：<code><listgroup.item as="div"><i class="bi-person me-2"></i>用户管理</listgroup.item>
- 如果需要保持链接行为，改用
as="a" 并补全 href 和 className="list-group-item-action"
- 千万别在
<listgroup.item></listgroup.item> 里嵌套 <button></button> 或其他组件来“模拟图标”，这会破坏列表组的语义结构和键盘导航逻辑
- 图标颜色建议用
text-secondary 等语义类，而不是硬写 style={{ color: '#6c757d' }}，否则暗色模式下会失效
图标本身不难加，难的是让图标和列表组的交互状态（active / disabled / hover）、响应式断点、以及不同框架的渲染逻辑对齐。很多人卡在“图标显示了但点击没反馈”或者“禁用后还能点”，其实问题不在图标，而在容器类型和 class 组合是否匹配。
