列
在打印布局类型的列中分割段落。
用法
要将文本段落分成列,只需添加 .uk-column-1-*
类之一。
类 | 描述 |
---|---|
.uk-column-1-2 |
将段落分成两半。 |
.uk-column-1-3 |
将段落分成三列。 |
.uk-column-1-4 |
将段落分成四列。 |
.uk-column-1-5 |
将段落分成五列。 |
.uk-column-1-6 |
将段落分成六列。 |
示例
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.
标记
<p class="uk-column-1-3">...</p>
响应式列
列组件还提供了响应式列类,这些类仅在特定断点生效。
类 | 描述 |
---|---|
.uk-column-* |
影响所有设备宽度。 |
.uk-column-small-* |
影响 480px 及以上的设备宽度。 |
.uk-column-medium-* |
影响 768px 及以上的设备宽度。 |
.uk-column-large-* |
影响 960px 及以上的设备宽度。 |
.uk-column-xlarge-* |
影响 1200px 及以上的设备宽度。 |
示例
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.
标记
<p class="uk-column-xlarge-1-4 uk-column-large-1-3 uk-column-medium-1-2">...</p>