跳到主要内容

文档

宽度

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

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

用法

将 .uk-width-* 类添加到元素以确定其大小。通常，你会使用网格组件中的网格及其子元素来创建单元。

类 描述
.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-3-6，而应该使用 .uk-width-1-2。

<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>

自动和扩展

宽度组件提供了额外的修饰符，为你提供更大的项目分配灵活性。

类 描述
.uk-width-auto 项目仅扩展到其自身内容的宽度。
.uk-width-expand 项目扩展以填充网格容器的剩余空间。 
<div uk-grid>
    <div class="uk-width-auto"></div>
    <div class="uk-width-expand"></div>
</div>
自动
扩展
<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>
项目
项目
项目
项目
项目
<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>
项目
项目
项目
项目
项目
<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>
小
中
大
超大
2 倍超大
<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>
扩展
1-3
扩展
扩展
<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 提供了许多响应式宽度类。基本上，它们的工作方式与通常的宽度类相同，除了它们具有表示它们生效的断点的后缀。这些类可以与可见性组件结合使用。这对于调整不同设备尺寸的布局和内容非常有用。

类 描述
.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>