Bootstrap 5图标模式侧边栏需手动用list-group结构+CSS微调实现，核心是包裹图标于或、统一尺寸、重置内边距与行高、用display:flex居中，并通过CSS控制图标/文字显隐。
Bootstrap 5 侧边栏图标模式依赖 nav + list-group 结构，不是靠组件自动切换
bootstrap 官方没有“图标模式侧边栏”这个内置功能，所谓图标模式，本质是手动把文字替换成 <i></i> 或 <svg></svg>，再用 css 控制尺寸和间距。很多人卡在以为要调某个开关或类名，其实核心是结构控制 + 尺寸微调。
常见错误现象：nav-item 里只放 <i></i>，结果图标堆成一列没对齐、点击区域太小、悬停无反馈；或者强行用 col-2 压窄宽度，但文字被截断又没隐藏逻辑。
- 图标必须包裹在
<a></a>或<button></button>内，否则语义错误且交互失效 - 推荐用
list-group替代nav：它默认垂直堆叠、有内边距、支持active状态，更贴合侧边栏行为 - 图标尺寸统一用
fs-4（Bootstrap 5.3+）或自定义font-size: 1.25rem，避免混用text-lg、h5等导致高度不一致
list-group-item 里放图标时，必须重置默认内边距和行高
Bootstrap 的 list-group-item 默认带 padding: 0.5rem 1rem 和 line-height: 1.6，直接塞小图标会显得上下空隙过大、视觉松散。这不是 bug，是为文字内容设计的，图标模式需主动覆盖。
使用场景：当侧边栏宽度压到 80px 左右，只留图标不显文字时，这点尤其关键。
- 加自定义 class 如
sidebar-icon-item，然后写.sidebar-icon-item { padding: 0.75rem 0; text-align: center; } - 移除
line-height，改用display: flex; align-items: center; justify-content: center;居中图标 - 如果用 Font Awesome，确保加载了
fa-fw类（固定宽度），否则不同图标宽度不一，导致对齐晃动
图标 + 文字共存时，用 flex-column + text-center 控制布局
很多项目需要“hover 展开文字”或“默认图标+文字，收缩后仅图标”，这不能靠 JS 切换 DOM，而是用 CSS 控制显示/隐藏和弹性布局。强行用 collapse 或 offcanvas 反而增加复杂度。
参数差异：Bootstrap 5.3 的 d-flex flex-column 比老版本的 flex-column 更稳定，text-center 必须加在父容器上，而非图标或文字单独加。
- 结构示例：
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action d-flex flex-column text-center py-3"> <i class="fas fa-home fs-4 mb-1"></i> <span class="small">首页</span> </a> </div> - 收缩状态只需给外层加
sidebar-collapsed类，CSS 里写.sidebar-collapsed .list-group-item span { display: none; }和.sidebar-collapsed .list-group-item i { margin-bottom: 0; } - 别用
visibility: hidden隐藏文字——它仍占空间；必须用display: none
移动端折叠后图标错位？检查 navbar-nav 和 offcanvas 的嵌套层级
在响应式场景下，有人把图标侧边栏放进 navbar，再套一层 offcanvas，结果图标在小屏展开后偏左、图标变大、点击区域错位。根本原因是 navbar-nav 自带 margin-left: -0.5rem 和 flex-wrap: wrap，会干扰图标流式布局。
性能影响：多一层 offcanvas 就多一次 DOM 查询和事件绑定，图标侧边栏本身不需要模态逻辑，硬套反而拖慢首屏渲染。
- 移动端侧边栏建议独立于
navbar，用position: fixed+top: 0实现常驻，再配合@media (max-width: 991.98px)切换left: -100%和left: 0 - 如果非要用
offcanvas，务必把侧边栏内容放在<div class="offcanvas-body"> 内，不要直接塞进 <code><nav></nav>标签 - 图标字体加载失败时，
<i></i>会塌成一个方块，加font-family: "Font Awesome 6 Free";并设font-weight: 900（针对 solid 图标）可减少 fallback 错乱
图标模式真正的复杂点不在怎么画图标，而在尺寸一致性、点击热区控制、响应式状态同步这三个地方。只要这三处对齐了，剩下的就是配色和动画的事。
