Container
版心
限制页面最大宽度并居中，防止大屏文字过长散架、小屏横向溢出。
Live Demo
真的可以点你刚才看到的这个：无论屏幕是 13 寸笔记本还是 34 寸带鱼屏，网页的正文和主要卡片始终规矩地收拢在中间最舒适的 1200px 范围内，两侧留出呼吸感白边。
它到底是什么
版心的本质是可读性边界与留白秩序。如果没有版心约束，在宽屏显示器上一行文字会被拉伸到几千像素，人眼阅读时频繁串行断裂（违反 65ch 最佳阅读行宽法则）；而在小屏端，生硬的固定宽度又会引发横向滚动灾难。好的版心是自适应的弹性安全区。
Anatomy · 它由什么组成
Max-Width最大宽度约束
通常为 1080px~1280px (max-w-7xl)
Margin Auto自动外边距
mx-auto 实现水平居中
Gutter / Padding两侧防贴边安全留白
移动端 px-4，桌面端 px-8
Content Well内部正文井
长文本嵌套 max-w-prose
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 正文阅读、博客、长文本页面（限制 65ch~75ch） | 用 |
| SaaS 落地页、卡片网格的主内容区域 | 用 |
| 表单、设置页、结账结算流程 | 用 |
| 地图全景、仪表盘看板大屏、视频剪辑轨道 | 不用 |
| 某些全宽背景条（背景全宽，但内容仍在版心内） | 视情况 |
全屏沉浸式应用（如地图、在线白板、视频播放器），强加版心会切碎沉浸感。
把版心写死固定宽度（如 width: 1200px），这会导致手机端出现横向滚动条。
Similar Patterns
别搞混Container当前
版心
限制页面最大宽度并居中，防止大屏文字过长散架、小屏横向溢出。
Full-Bleed Section
全宽通栏带
背景横向铺满屏幕两端边缘，但内部文本与元素依然遵守版心收拢的对比型节段。
一句话区分：限制页面最大宽度并居中，防止大屏文字过长散架、小屏横向溢出。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
页面主体使用居中版心：最大宽度 1280px，水平居中，移动端两侧留 16px 边距，大屏留 32px 边距，正文区域不超过 65 字符行宽。
不要只对 AI 说
Bad → Better不要这样对 AI 说
页面宽度做 1200px 居中。
改成这样说
页面主体用自适应版心：max-w-7xl mx-auto px-4 sm:px-6 lg:px-8，文章正文用 max-w-prose 限制行宽，背景通栏而文字内容收在版心内。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。