布局

Container 容器

页面内容最大宽度与水平居中；配合 pvs-band 做章节壳。

默认容器

水平居中 + 左右 padding；默认 max-width 1140px。

内容在 pvs-container 内居中

<div class="pvs-border pvs-bg-surface-muted pvs-py-2">
  <div class="pvs-container pvs-py-4 pvs-border pvs-bg-surface">
    <p class="pvs-m-0 pvs-text-sm">内容在 <code>pvs-container</code> 内居中</p>
  </div>
</div>

页面骨架

常见：pvs-band 全宽底 + 内层 pvs-container。

章节

band 撑满视口宽，container 限制阅读宽

<section class="pvs-band pvs-band--muted">
  <div class="pvs-container">
    <h2 class="pvs-h4 pvs-m-0">章节</h2>
    <p class="pvs-m-0 pvs-mt-2 pvs-text-muted">band 撑满视口宽，container 限制阅读宽</p>
  </div>
</section>

宽度变体

--narrow 960px

默认 1140px

--wide 1320px

--fluid 无 max

<div class="pvs-stack pvs-gap-3 pvs-border pvs-p-3 pvs-bg-surface-muted">
  <div class="pvs-container pvs-container--narrow pvs-py-2 pvs-border pvs-bg-surface">
    <code>--narrow</code> 960px</div>
      <div class="pvs-container pvs-py-2 pvs-border pvs-bg-surface">
        <code>默认</code> 1140px</div>
          <div class="pvs-container pvs-container--wide pvs-py-2 pvs-border pvs-bg-surface">
            <code>--wide</code> 1320px</div>
              <div class="pvs-container pvs-container--fluid pvs-py-2 pvs-border pvs-bg-surface">
                <code>--fluid</code> 无 max</div>
                </div>

与间距配合

pvs-py-12 章节上下留白

<div class="pvs-container pvs-py-12 pvs-px-4 pvs-border">
  <code>pvs-py-12</code> 章节上下留白</div>

响应式

移动优先；在类名前加 sm: md: lg: xl:，仅在该断点及以上生效。详见响应式。

md 起 narrow

<div class="pvs-container md:pvs-container--narrow pvs-py-3 pvs-border pvs-bg-surface-muted">
  <code>md 起 narrow</code>
</div>

类名速查

类	样式
`pvs-container`	默认 1140px + padding
`pvs-container--narrow`	960px
`pvs-container--wide`	1320px
`pvs-container--fluid`	无 max-width