# Content

> content 是用来包裹正文的容器，主要包括 wrapper，header，content 组件

## 总览

content 组件主要是给正文提供一个容器，用法和 `nly-contaier`并无差异

**注意:**

- 请尽量避免 `nly-content-wrapper` 组件和 `nly-wrapper-content` 组件出现在同一个页面中，这两个组件功能可以互换
- content 正文容器是非必须的，页面中也可以用 `nly-container` 容器组件来代替

以下这个写法是配合左右行中下布局的写法，默认 `nly-content-wrapper` 会有一个 `margin-left: 250px` 偏移属性。

如果不需要这偏移量，可以使用 `Top Navigation` 布局

```html
<nly-content-wrapper>
  <nly-content-header>
    header
  </nly-content-header>
  <nly-content>
    content
  </nly-content>
</nly-content-wrapper>

<!-- 总览.name -->
<!-- nly-content.vue -->
```

如果不是单页面应用，不需要左右布局，可以直接用 `nly-content` 作为正文最外层容器

```html
<nly-content>
  <nly-content-header>
    header
  </nly-content-header>
  <nly-content>
    content
  </nly-content>
</nly-content>

<!-- 无偏移正文容器.name -->
<!-- nly-content.vue -->
```