用户在窄屏仍能从可见入口展开目录或本页大纲跳转，正文行宽不变；当前页与当前标题的摘要让人随时知道自己在哪里，选完后焦点回到正文。
产品与设计 · 页面结构与适配
文档布局Doc Layout
用左目录、中正文、右本页大纲组织文档阅读，并让当前位置在三栏间持续同步。
先操作：目录、本页大纲和阅读位置
一个多章节产品文档阅读器。点左目录换页、点右本页大纲跳标题，看目录、正文、大纲的当前位置如何同步；切到窄屏，左右栏收进可展开入口，正文行宽不变。
产品文档阅读器
一个多章节产品文档。点左目录换页、点右本页大纲跳标题，看目录、正文、大纲的当前位置如何同步；切到窄屏，左右栏会收进可展开的入口，正文行宽不变。
开始使用 · 安装 CLI
用包管理器装好命令行工具，运行 --version 能看到版本号即成功。
判断与下一步：当前位置：开始使用 · 安装 CLI。下一步可点左目录换页、点右本页大纲跳标题，三栏会同步；也可切到窄屏看左右栏收进入口。
从刚才的操作里提炼
你在阅读器里看到的就是文档布局的核心工作方式。
- 三栏各管一档：左目录承载跨页面导航（哪一章），右本页大纲承载页内定位（这一页的哪个标题），中间正文承载阅读。
- 当前位置在三栏同步：目录用
aria-current="page"标当前页，本页大纲用aria-current="location"标当前标题——阅读器里两个 Rausch 标记一起跟着你走。 - 阅读位置持续可见：正文顶部给出「第 N / M 章 · 第 X / Y 节」，到末节时「读下一节」会禁用并停在终点，不让用户误以为还有后续。
- 窄屏收栏不丢导航：切到窄屏，左右栏收进可展开的「目录」「本页」入口；选完一项后焦点回到正文，当前位置保留。
- 正文行宽保持可读：无论宽窄，正文都不撑满整屏，避免一行过长降低阅读效率（行宽约束见关联的「居中单栏」）。
什么时候用文档布局
从用户信号判断，也要知道什么时候它反而拖累阅读。
- 用：多章节长文档，如产品指南、API 参考、教程站，每页内部还有多个标题需要跳转。
- 用：用户会反复在不同章节、不同标题之间来回查找，需要常驻的跨页导航和页内定位。
- 不用：单屏就能看完的公告、营销首页或线性任务流——三栏只会抢空间。
- 不用：移动端首屏直接铺三栏；必须降级为可收起的入口，不能挤掉正文。
怎么用：从三栏到窄屏恢复
让三栏在宽屏各司其职，窄屏安全收起，并把当前位置一直留在可见处。
- 先分清目录与本页大纲：左目录放跨页面章节，右大纲放当前页的 H2 / H3 标题；两份内容不要重复。
- 给当前位置用
aria-current="page"（目录）和aria-current="location"（大纲），并在正文标题同步；标记要一眼可辨，不能只靠颜色。 - 正文用独立的滚动容器并限宽（参考居中单栏），目录和大纲不随正文滚动而改变当前位置。
- 锚点跳转或返回时保留阅读上下文：刷新或后退能回到原来的章节和标题，不突然丢位置。
- 窄屏把左右栏收进可展开入口，提供可见的「目录」「本页」按钮；选完后焦点回到正文，当前位置不丢。
正反例：同一长文档，只改窄屏导航
围绕同一篇多章节文档的窄屏，只改变收栏后有没有恢复入口，看用户后果如何不同。
用户只能一路滚动，滚到深处既看不到所属章节，也跳不到同级标题；想回顶部找导航代价很高，当前位置也没有任何摘要，容易直接离开。
快速自测
一篇产品更新公告只有一屏内容，要不要套用三栏文档布局？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。