侧边工具栏必须用 position: fixed + flex-column 实现响应式布局，禁用 col- 栅格；小屏下隐藏并用汉堡菜单触发，悬停提示须用 bootstrap tooltip 并设 boundary: 'window'。
侧边工具栏的 HTML 结构必须用 position: fixed + flex-column
响应式侧边工具栏不能依赖 col- 栅格系统——它在小屏下会塌陷成横向布局，破坏垂直工具栏形态。正确做法是脱离文档流：外层用 position: fixed 定位到视口左侧，内部用 flex-column 堆叠按钮。Bootstrap 5 的 flex-column 类能保证子元素垂直排列，且默认撑满父容器高度。
关键细节：
- 必须给固定定位容器设
top: 0、left: 0、height: 100vh，否则在滚动时工具栏会“消失”或错位 - 每个工具按钮需包裹在
<div class="d-flex flex-column"> 内，避免 Bootstrap 默认的 <code>margin-bottom累加导致高度溢出 - 小屏（
sm以下）建议直接隐藏工具栏，用汉堡菜单触发，而非强行压缩图标——否则悬停提示文字无处展开 - 必须在
上调用new bootstrap.Tooltip()初始化，否则data-bs-toggle不生效 - 提示文字内容通过
data-bs-title设置，不要用title属性——后者会被浏览器原生 tooltip 干扰 - 为避免提示框被
fixed容器裁剪，需给工具栏父容器加style="overflow: visible" - 移动端用户无法悬停，所以必须同时支持点击触发：添加
data-bs-trigger="hover focus"，让焦点态（如 Tab 键导航）也能唤出提示
悬停提示文字要用 data-bs-toggle="tooltip" 而非自定义 :hover + ::after
Bootstrap 自带的 Tooltip 插件会自动处理定位、延迟、销毁和键盘可访问性，手写 CSS 悬停提示在移动端完全失效（没有 hover 状态），且在工具栏紧贴屏幕边缘时容易被裁切。
实操要点：
响应式折叠逻辑要靠 media query + visibility 类，别用 display: none
如果直接用 d-none d-lg-block 控制显示/隐藏，Tooltip 实例在隐藏时不会自动销毁，再次显示时可能位置错乱或重复绑定事件。更稳妥的方式是用 visibility: hidden 配合 opacity: 0，保持 DOM 存在但不可见。
推荐写法：
@media (max-width: 991.98px) {
.sidebar-toolbar {
visibility: hidden;
opacity: 0;
transition: opacity 0.2s;
}
.sidebar-toolbar.show {
visibility: visible;
opacity: 1;
}
}
这样 JavaScript 可以安全地复用同一组 Tooltip 实例，只需切换 .show 类即可。
图标按钮的尺寸与间距在小屏下必须重置 padding 和 font-size
Bootstrap 默认的 btn 尺寸在窄屏上会挤占过多空间，且图标过小导致悬停提示难以触发。不能只改 font-size，还要同步调整内边距和行高，否则图标会偏移或文字截断。
适配建议：
- 为所有工具按钮统一加类
sidebar-btn，然后在媒体查询中重置：padding: 0.5rem、font-size: 1.25rem、line-height: 1 - 图标使用
<i class="bi bi-xxx"></i>（Bootstrap Icons），确保vertical-align: -0.125em对齐基线 - 悬停提示的
max-width设为12rem，避免在窄屏上横跨整个视口
最易忽略的是 Tooltip 的 boundary 选项——默认 'scrollParent' 在 fixed 容器里会导致提示框被截断，必须显式设为 'window' 才能正常溢出显示。
