列
将文本段落分割成多个列进行显示。
用法
将文本段落分割成多个列，只需要添加一个 .uk-column-1-* 类名即可生效。
| Class | Description |
|---|---|
.uk-column-1-2 |
将文本段落分割成两列 |
.uk-column-1-3 |
将文本段落分割成三列 |
.uk-column-1-4 |
将文本段落分割成四列 |
.uk-column-1-5 |
将文本段落分割成五列 |
.uk-column-1-6 |
将文本段落分割成六列 |
Example
Markup
<p class="uk-column-1-3">...</p>
响应式布局中的列
列组件通用提供了只在特定视口宽度中生效的响应式类名
| Class | Description |
|---|---|
.uk-column-* |
所有设备宽度都生效 |
.uk-column-small-* |
只在设备宽度 480px 以上时生效 |
.uk-column-medium-* |
只在设备宽度 768px 以上时生效 |
.uk-column-large-* |
只在设备宽度 960px 以上时生效 |
.uk-column-xlarge-* |
只在设备宽度 1200px 以上时生效 |
Example
Markup
<p class="uk-column-xlarge-1-4 uk-column-large-1-3 uk-column-medium-1-2">...</p>