Bootstrap 5 帮助文档左侧导航需用 Accordion 实现可折叠，但须手动补逻辑：每个章节设唯一 id，页面加载时根据 hash 主动展开对应项，点击导航链接需 preventDefault + scrollIntoView + 手动 show，同时监听 hashchange 同步状态。
直接用 container-fluid + row + col-lg-3 col-lg-9 就能搭出可用的帮助文档页，但真正卡住人的从来不是结构，而是锚点跳转失效、折叠菜单不收起、代码块渲染错位这三类问题。
帮助文档的左侧导航怎么实现可折叠且保持锚点有效
Bootstrap 5 的 Accordion 组件本身不支持“点击标题跳转到对应内容并展开”，得手动补逻辑。常见错误是只加 data-bs-toggle="collapse"，却不处理 hash 变化或初始展开状态。
- HTML 中每个章节
<div class="accordion-item"> 必须有唯一 <code>id，对应左侧导航<a href="#section-1"></a> - 页面加载后检查
window.location.hash，用bootstrap.Collapse.getOrCreateInstance主动展开目标项 - 点击导航链接时，先
preventDefault，再scrollIntoView({block: 'start'})，最后手动触发 collapse 的show方法 - 别依赖
href="#section-1"默认行为——它只会滚动，不会展开，且在 SPA 路由中容易被拦截 - 必须给
<pre class="brush:php;toolbar:false;"></pre>加class="bg-light p-3 rounded overflow-x-auto"，其中overflow-x-auto是关键 - 避免给
<code>设固定font-size，改用text-sm或text-xs工具类（v5.3+ 支持） - 如果用了 Prism.js 或 highlight.js，确保其初始化在 Bootstrap 的 JS 之后，否则
pre code的 class 可能被覆盖 - 不要把
<pre class="brush:php;toolbar:false;"></pre>套在<div class="row"> 外层——它会破坏 flex 布局，导致右侧内容换行 <h3>如何让帮助页在后台系统里风格统一又不冲突</h3> <p>后台主框架通常已加载了全局 CSS（比如侧边栏、navbar），直接塞进帮助页 HTML 容易出现字体继承错乱、间距过大、按钮样式被覆盖等问题。</p> <ul> <li>帮助页容器加 <code>class="bg-white rounded p-4 shadow-sm"，显式重置背景和圆角，避免透出主框架的灰色底色 - 所有标题（
h2~h4）加class="mb-3"，不依赖默认 margin，因为主框架可能已重置过 heading margin - 禁用帮助页内所有
.btn的默认 padding 和 border-radius 继承，显式写btn btn-sm btn-outline-secondary - 如果主框架用了 CSS 变量（如
--bs-primary），帮助页内可复用，但别假设变量一定存在——加 fallback：color: var(--bs-primary, #0d6efd);
代码块怎么在文档页里正常显示且不破坏栅格流
Bootstrap 默认对 <pre class="brush:php;toolbar:false;"><code></code> 没做宽度约束，大段 JSON 或 HTML 示例会撑破 <code>col-lg-9</code>，尤其在小屏下直接溢出横向滚动。</pre>
最常被忽略的是 hashchange 监听：用户点浏览器后退/前进时，左侧导航高亮状态和右侧折叠展开状态不同步，看起来像“页面没更新”。这个必须手写 window.addEventListener('hashchange', ...) 来同步，Bootstrap 自己不管这事。
