容器／Container

该组件使您可以对齐和居中页面内容。

用法

将 .uk-container class添加到block元素，使其具有最大宽度并将网站的主体内容包裹在内。该元素将居中显示，并且两侧会根据屏幕尺寸添加可以自动调整大小的 padding。

注意 在容器组件内部再嵌套容器组件会移除被嵌套容器的padding以避免产生不必要的间距。

<div class="uk-container"></div>

尺寸调整

将下列类之一添加到容器将应用不同的最大宽度。

Class 描述
.uk-container-xsmall 为超窄的容器添加这个class。
.uk-container-small 窄的容器添加这个class。
.uk-container-large 比较宽的容器。
.uk-container-xlarge 超宽的容器。
.uk-container-expand 如果您不想限制容器的宽度，但又需要容器拥有可以自动调整大小的水平padding，请添加这个class。 
<div class="uk-container uk-container-xsmall"></div>

<div class="uk-container uk-container-small"></div>

<div class="uk-container uk-container-large"></div>

<div class="uk-container uk-container-xlarge"></div>

<div class="uk-container uk-container-expand"></div>

区块中的容器

可以应用这个组件来调整 Section 组件中各节内部内容的宽度。

<div class="uk-section uk-section-primary">
    <div class="uk-container uk-container-small"></div>
</div>

上一篇： Comment

下一篇： Countdown

container.md

# 容器／Container

<p class="uk-text-lead">该组件使您可以对齐和居中页面内容。</p>

## Usage-用法

将 `.uk-container` class添加到block元素，使其具有最大宽度并将网站的主体内容包裹在内。该元素将居中显示，并且两侧会根据屏幕尺寸添加可以自动调整大小的 padding。

**注意** 在容器组件内部再嵌套容器组件会移除被嵌套容器的padding以避免产生不必要的间距。

```html
<div class="uk-container"></div>
```

***

## Size modifiers-尺寸调整

将下列类之一添加到容器将应用不同的最大宽度。

| Class                  | 描述                                                                                |
| :--------------------- | :--------------------------------------------------------------------------------- |
| `.uk-container-xsmall` | 为超窄的容器添加这个class。  |
| `.uk-container-small`  | 窄的容器添加这个class。  |
| `.uk-container-large`  | 比较宽的容器。  |
| `.uk-container-xlarge` | 超宽的容器。  |
| `.uk-container-expand` | 如果您不想限制容器的宽度，但又需要容器拥有可以自动调整大小的水平padding，请添加这个class。 |

```html
<div class="uk-container uk-container-xsmall"></div>

<div class="uk-container uk-container-small"></div>

<div class="uk-container uk-container-large"></div>

<div class="uk-container uk-container-xlarge"></div>

<div class="uk-container uk-container-expand"></div>
```

***

## Container in sections-区块中的容器

可以应用这个组件来调整 [Section 组件](section.md)中各节内部内容的宽度。

```html
<div class="uk-section uk-section-primary">
    <div class="uk-container uk-container-small"></div>
</div>
```