跳到主要内容

文档

Width

为不同视口尺寸定义元素的宽度。

UIkit 的 Width 组件常与网格配合使用，把内容拆分为响应式列。你可以使用分数、自动宽度或扩展单元来填满剩余空间，也可以把这些模式组合起来。

用法

为元素添加某个 .uk-width-* 类来确定其尺寸。通常你会使用 Grid 组件 中的网格及其子元素来构成这些单元。

类 说明
.uk-width-1-1 占满可用宽度的 100%。
.uk-width-1-2 元素占据父容器的二分之一。
.uk-width-1-3, .uk-width-2-3 元素占据父容器的三分之一。
.uk-width-1-4, .uk-width-3-4 元素占据父容器的四分之一。
.uk-width-1-5, .uk-width-2-5,
.uk-width-3-5, .uk-width-4-5		 元素占据父容器的五分之一。
.uk-width-1-6, .uk-width-5-6 元素占据父容器的六分之一。

注意 我们去除了每组单元类中的冗余项，例如应当使用 .uk-width-1-2，而不是 .uk-width-3-6。

<div uk-grid>
    <div class="uk-width-1-2"></div>
    <div class="uk-width-1-2"></div>
</div>
1-3
1-3
1-3
1-2
1-2
1-4
3-4
<div class="uk-text-center" uk-grid>
    <div class="uk-width-1-3">
        <div class="uk-card uk-card-default uk-card-body">1-3</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-card uk-card-default uk-card-body">1-3</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-card uk-card-default uk-card-body">1-3</div>
    </div>
</div>

<div class="uk-text-center" uk-grid>
    <div class="uk-width-1-2">
        <div class="uk-card uk-card-default uk-card-body">1-2</div>
    </div>
    <div class="uk-width-1-2">
        <div class="uk-card uk-card-default uk-card-body">1-2</div>
    </div>
</div>

<div class="uk-text-center" uk-grid>
    <div class="uk-width-1-4">
        <div class="uk-card uk-card-default uk-card-body">1-4</div>
    </div>
    <div class="uk-width-3-4">
        <div class="uk-card uk-card-default uk-card-body">3-4</div>
    </div>
</div>

自动与扩展

Width 组件还提供额外的修饰符，让你在分配条目时更加灵活。

类 说明
.uk-width-auto 条目仅扩展到自身内容的宽度。
.uk-width-expand 条目扩展到填满网格容器的剩余空间。 
<div uk-grid>
    <div class="uk-width-auto"></div>
    <div class="uk-width-expand"></div>
</div>
Auto
Expand
<div class="uk-text-center" uk-grid>
    <div class="uk-width-auto">
        <div class="uk-card uk-card-default uk-card-body">Auto</div>
    </div>
    <div class="uk-width-expand">
        <div class="uk-card uk-card-default uk-card-body">Expand</div>
    </div>
</div>

等宽子元素

要创建子元素宽度均分的网格，你无需为网格中的每个列表项应用相同的类。只需为网格本身添加某个 .uk-child-width-* 类。

类 说明
.uk-child-width-1-2 所有元素占据父容器的二分之一。
.uk-child-width-1-3 所有元素占据父容器的三分之一。
.uk-child-width-1-4 所有元素占据父容器的四分之一。
.uk-child-width-1-5 所有元素占据父容器的五分之一。
.uk-child-width-1-6 所有元素占据父容器的六分之一。
.uk-child-width-auto 根据内容尺寸把网格划分为相等的单元。
.uk-child-width-expand 根据可用空间把网格划分为相等的单元。 
<div class="uk-child-width-1-4" uk-grid>
    <div></div>
    <div></div>
    …
</div>
Item
Item
Item
Item
Item
<div class="uk-child-width-1-4 uk-grid-small uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>

使用分数宽度类的条目，在超出容器宽度时会换行到新的一行。而使用 expand 类时，空间会在始终处于同一行的条目之间平均分配。

<div class="uk-child-width-expand" uk-grid>
    <div></div>
    <div></div>
    …
</div>
Item
Item
Item
Item
Item
<div class="uk-child-width-expand uk-grid-small uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>

固定宽度

除了按比例计算的宽度类，你还可以添加以下类，它们应用固定宽度。

类 说明
.uk-width-small 应用 150px 的固定宽度。
.uk-width-medium 应用 300px 的固定宽度。
.uk-width-large 应用 450px 的固定宽度。
.uk-width-xlarge 应用 600px 的固定宽度。
.uk-width-2xlarge 应用 750px 的固定宽度。 
<div class="uk-width-medium"></div>
Small
Medium
Large
X-Large
2X-Large
<div class="uk-width-small uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">Small</div></div>
<div class="uk-width-medium uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">Medium</div></div>
<div class="uk-width-large uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">Large</div></div>
<div class="uk-width-xlarge uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">X-Large</div></div>
<div class="uk-width-2xlarge uk-margin"><div class="uk-card uk-card-small uk-card-default uk-card-body">2X-Large</div></div>

混合宽度

你还可以为单个条目组合使用 .uk-child-width-* 类与 .uk-width-* 类。这样就能实现诸如：网格中一个条目具有特定宽度，其余条目扩展以填满剩余空间。

<div class="uk-child-width-expand" uk-grid>
    <div></div>
    <div class="uk-width-1-3"></div>
    <div></div>
    …
</div>
Expand
1-3
Expand
Expand
<div class="uk-child-width-expand uk-grid-small uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Expand</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-card uk-card-default uk-card-body">1-3</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Expand</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Expand</div>
    </div>
</div>

响应式宽度

UIkit 提供了一系列响应式宽度类。它们的工作方式与普通宽度类基本相同，区别在于带有后缀，用以表示从哪个断点开始生效。这些类可以与 Visibility 组件 组合使用，非常适合针对不同设备尺寸调整布局和内容。

类 说明
.uk-width-*
.uk-child-width-*		 影响所有设备宽度，网格列保持并排。
.uk-width-*@s
.uk-child-width-*@s		 影响 640px 及以上的设备宽度。网格列在更小的尺寸下会堆叠。
.uk-width-*@m
.uk-child-width-*@m		 影响 960px 及以上的设备宽度。网格列在更小的尺寸下会堆叠。
.uk-width-*@l
.uk-child-width-*@l		 影响 1200px 及以上的设备宽度。网格列在更小的尺寸下会堆叠。
.uk-width-*@xl
.uk-child-width-*@xl		 影响 1600px 及以上的设备宽度。网格列在更小的尺寸下会堆叠。
1-2@m
1-4@m
1-4@m
1-5@m
hidden@l
1-5@m
1-3@l
3-5@m
2-3@l
auto@m
visible@l
1-3@m
expand@m
<div class="uk-grid-match uk-grid-small uk-text-center" uk-grid>
    <div class="uk-width-1-2@m">
        <div class="uk-card uk-card-default uk-card-body">1-2@m</div>
    </div>
    <div class="uk-width-1-4@m">
        <div class="uk-card uk-card-default uk-card-body">1-4@m</div>
    </div>
    <div class="uk-width-1-4@m">
        <div class="uk-card uk-card-default uk-card-body">1-4@m</div>
    </div>
    <div class="uk-width-1-5@m uk-hidden@l">
        <div class="uk-card uk-card-secondary uk-card-body">1-5@m<br>hidden@l</div>
    </div>
    <div class="uk-width-1-5@m uk-width-1-3@l">
        <div class="uk-card uk-card-default uk-card-body">1-5@m<br>1-3@l</div>
    </div>
    <div class="uk-width-3-5@m uk-width-2-3@l">
        <div class="uk-card uk-card-default uk-card-body">3-5@m<br>2-3@l</div>
    </div>
</div>

<div class="uk-grid-match uk-grid-small uk-text-center" uk-grid>
    <div class="uk-width-auto@m uk-visible@l">
        <div class="uk-card uk-card-primary uk-card-body">auto@m<br>visible@l</div>
    </div>
    <div class="uk-width-1-3@m">
        <div class="uk-card uk-card-default uk-card-body">1-3@m</div>
    </div>
    <div class="uk-width-expand@m">
        <div class="uk-card uk-card-default uk-card-body">expand@m</div>
    </div>
</div>