边距
一组用于在元素之间添加间距的实用程序类。
用法
将以下一个或多个类添加到任何元素以创建与段落通常相同的垂直和/或水平边距。
| 类 | 描述 |
|---|---|
.uk-margin |
如果它之前有另一个元素，则添加顶部边距，并且始终添加底部边距。 |
.uk-margin-top |
添加顶部边距。 |
.uk-margin-bottom |
添加底部边距。 |
.uk-margin-left |
添加左边距。 |
.uk-margin-right |
添加右边距。 |
<div class="uk-margin"></div>- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-margin uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="uk-margin uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
小边距
添加以下一个或多个类以向块级元素添加小间距。
| 类 | 描述 |
|---|---|
.uk-margin-small |
如果它之前有另一个元素，则添加小顶部边距，并且始终添加底部边距。 |
.uk-margin-small-top |
添加小顶部边距。 |
.uk-margin-small-bottom |
添加小底部边距。 |
.uk-margin-small-left |
添加小左边距。 |
.uk-margin-small-right |
添加小右边距。 |
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-margin-small uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="uk-margin-small uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
中等边距
添加以下一个或多个类以向块级元素添加中等间距。
| 类 | 描述 |
|---|---|
.uk-margin-medium |
如果它之前有另一个元素，则添加中等顶部边距，并且始终添加底部边距。 |
.uk-margin-medium-top |
添加中等顶部边距。 |
.uk-margin-medium-bottom |
添加中等底部边距。 |
.uk-margin-medium-left |
添加中等左边距。 |
.uk-margin-medium-right |
添加中等右边距。 |
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-margin-medium uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="uk-margin-medium uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
大边距
添加以下一个或多个类以向块级元素添加大间距。
| 类 | 描述 |
|---|---|
.uk-margin-large |
如果它之前有另一个元素，则添加大边距，并且始终添加底部边距。 |
.uk-margin-large-top |
添加大顶部边距。 |
.uk-margin-large-bottom |
添加大底部边距。 |
.uk-margin-large-left |
添加大左边距。 |
.uk-margin-large-right |
添加大右边距。 |
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-margin-large uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="uk-margin-large uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
超大边距
添加以下一个或多个类以向块级元素添加非常大的间距。
| 类 | 描述 |
|---|---|
.uk-margin-xlarge |
如果它之前有另一个元素，则添加更大的边距，并且始终添加底部边距。 |
.uk-margin-xlarge-top |
添加更大的顶部边距。 |
.uk-margin-xlarge-bottom |
添加更大的底部边距。 |
.uk-margin-xlarge-left |
添加更大的左边距。 |
.uk-margin-xlarge-right |
添加更大的右边距。 |
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-margin-xlarge uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="uk-margin-xlarge uk-card uk-card-default uk-card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
移除边距
添加以下一个或多个类以从块级元素中移除边距。
| 类 | 描述 |
|---|---|
.uk-margin-remove |
移除所有边距。 |
.uk-margin-remove-top |
移除顶部边距。 |
.uk-margin-remove-bottom |
移除底部边距。 |
.uk-margin-remove-left |
移除左边距。 |
.uk-margin-remove-right |
移除右边距。 |
.uk-margin-remove-vertical |
移除所有垂直边距。 |
.uk-margin-remove-adjacent |
移除紧随其后的元素的顶部边距。 |
.uk-margin-remove-first-child |
移除第一个子元素的顶部边距。 |
.uk-margin-remove-last-child |
移除最后一个子元素的底部边距。 |
<h1 class="uk-margin-remove"></h1>响应式
UIkit 提供了许多响应式类来移除边距。基本上，它们的工作原理与通常的移除边距类相同，只是它们带有代表断点的后缀，这些断点是从该断点开始生效的。
| 类 | 描述 |
|---|---|
.uk-margin-remove-left@s.uk-margin-remove-right@s |
影响设备宽度为640px及更大的设备。 |
.uk-margin-remove-left@m.uk-margin-remove-right@m |
影响设备宽度为960px及更大的设备。 |
.uk-margin-remove-left@l.uk-margin-remove-right@l |
影响设备宽度为1200px及更大的设备。 |
.uk-margin-remove-left@xl.uk-margin-remove-right@xl |
影响设备宽度为1600px及更大的设备。 |
自动边距
添加以下一个或多个类以设置自动边距。这对于将具有固定宽度的块级元素和弹性元素居中或以其他方式对齐很有用。
| 类 | 描述 |
|---|---|
.uk-margin-auto |
将左、右边距设置为自动，水平居中块级元素和弹性元素。 |
.uk-margin-auto-top |
将顶部边距设置为自动，将块级元素和弹性元素推到底部。 |
.uk-margin-auto-bottom |
将底部边距设置为自动，将块级元素和弹性元素推到顶部。 |
.uk-margin-auto-left |
将左边距设置为自动，将块级元素和弹性元素推到右边。 |
.uk-margin-auto-right |
将右边距设置为自动，将块级元素和弹性元素推到左边。 |
.uk-margin-auto-vertical |
将顶部和底部边距设置为自动，仅垂直居中弹性元素。 |
- 块级元素弹性项目
<div class="uk-margin uk-margin-auto-left uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Block element</div> <div class="uk-flex uk-height-medium uk-background-muted uk-margin uk-text-center"> <div class="uk-margin-auto uk-margin-auto-vertical uk-width-1-2@s uk-card uk-card-default uk-card-body">Flex item</div> </div>
响应式
UIkit 提供了许多响应式自动边距类。基本上，它们的工作原理与通常的自动边距类相同，只是它们带有代表断点的后缀，这些断点是从该断点开始生效的。
| 类 | 描述 |
|---|---|
.uk-margin-auto-left@s.uk-margin-auto@s.uk-margin-auto-right@s |
影响设备宽度为640px及更大的设备。 |
.uk-margin-auto-left@m.uk-margin-auto@m.uk-margin-auto-right@m |
影响设备宽度为960px及更大的设备。 |
.uk-margin-auto-left@l.uk-margin-auto@l.uk-margin-auto-right@l |
影响设备宽度为1200px及更大的设备。 |
.uk-margin-auto-left@xl.uk-margin-auto@xl.uk-margin-auto-right@xl |
影响设备宽度为1600px及更大的设备。 |
- 块级元素块级元素块级元素
<div class="uk-margin uk-margin-auto-right uk-margin-auto@m uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Block element</div> <div class="uk-margin uk-margin-auto uk-margin-auto-left@m uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Block element</div> <div class="uk-margin uk-margin-auto-left uk-margin-auto-right@m uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Block element</div>
动态换行
要向堆叠元素添加间距，例如在较小的视窗中换行的内联元素，只需将uk-margin属性添加到其父容器。它会自动将.uk-margin-small-top类添加到下面的元素。
<div uk-margin>
<button></button>
<button></button>
</div><div uk-margin> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> <button class="uk-button uk-button-default">Button</button> </div>
组件选项
这些选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 了解更多
| 选项 | 值 | 默认值 | 描述 |
|---|---|---|---|
margin |
字符串 | uk-margin-small-top |
此类将添加到换行到下一行的项目中，通常用于为上一行创建边距。 |
first-column |
字符串 | uk-first-column |
此类将添加到每行中的第一个元素。 |
JavaScript
了解更多关于 JavaScript 组件.
初始化
UIkit.margin(element, options);