列
将文本段落分割成多个列进行显示。
用法
将文本段落分割成多个列，只需要添加一个 .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
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Markup
<p class="uk-column-xlarge-1-4 uk-column-large-1-3 uk-column-medium-1-2">...</p>