文章主体应使用.container-md或.container-lg实现窄屏占满、宽屏限宽，图片加img-fluid，代码块用pre-scrollable，标题用mb-*类调整间距，侧边栏小屏用offcanvas替代collapse。
用 bootstrap 5 的栅格系统控制文章主体宽度和断点
Bootstrap 5 默认的 .container 是响应式居中容器，但文章详情页通常需要「窄屏下占满、宽屏下限制最大宽度」。直接套用 .container 在大屏上会过宽（比如 1400px+），影响阅读体验。
- 文章正文建议用
.container-md或.container-lg：小屏（width: 100%，中屏起才固定宽度（如.container-md在 ≥768px 时 max-width: 720px） - 避免用
.container-fluid：它永远 100% 宽，导致大屏文字行过长，可读性差 - 如果需更精细控制（比如只在 ≥992px 才限宽），可自定义类：
.article-container { max-width: 800px; }，再配合@media (min-width: 992px)媒体查询
图片和代码块必须加 img-fluid 和 pre-scrollable
文章里插图或代码块不处理，会在大屏被拉伸变形，或小屏溢出容器。
- 图片一律加
class="img-fluid"：它设了max-width: 100%和height: auto，确保等比缩放 - 代码块用
<pre class="pre-scrollable"></pre>：小屏时出现横向滚动条，避免折行错乱；别只用<pre class="brush:php;toolbar:false;"></pre>或<code>，它们不带响应式行为 - 注意：如果用了第三方高亮库（如 Prism），要确认其
<pre class="brush:php;toolbar:false;"></pre>是否已包含pre-scrollable，否则手动补上
标题层级与间距要用 Bootstrap 的 spacing 工具类微调
默认 <h1></h1>~<h6></h6> 的 margin-bottom 太大，尤其在手机上显得松散，破坏节奏。
- 用
mb-3、mb-4替代原生 margin：比如<h2 class="mb-3"></h2>，让标题和下一段距离更紧凑 - 小屏下可叠加响应式间距，如
mb-2 mb-md-3：手机用小间距，中屏起恢复常规 - 别依赖重置 CSS 或全局修改
h2的 margin：会影响其他页面，且违背 Bootstrap 的工具类设计意图
侧边栏在小屏折叠后，用 offcanvas 而不是 collapse
很多教程用 .collapse 实现「小屏隐藏、点击展开」的目录/标签栏，但它只是显隐，没位移动画，用户感知弱，且可能遮挡正文。
- Bootstrap 5 推荐用
offcanvas：自带滑入动画、背影遮罩、点击外部自动关闭，体验更接近原生 App - 关键结构是
<div class="offcanvas offcanvas-start"> + 触发按钮的 <code>data-bs-target="#sidebar" - 注意：
offcanvas默认不随页面滚动，如果侧边栏内容长，得手动加position: sticky或 JS 监听滚动，否则小屏下滑时目录就看不见了
响应式不是「写完再适配」，而是从第一行 HTML 就决定容器、图片、间距、交互组件的断点行为。最常漏掉的是图片 class 和 offcanvas 的滚动适配——这两处一错，整页在 iPad 或折叠屏上就读着别扭。
