UIkit3.x文档

宽度

定义元素在不同视口大小中的宽度。

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

用法

添加一个.uk-width-* class到元素来确定它的大小。通常，你需要用到Grid 组件以及它的子元素来创建布局单元。

Class Description
.uk-width-1-1 填充可用宽度的100％。
.uk-width-1-2 元素占用其父容器的一半。
.uk-width-1-3 to .uk-width-2-3 元素占用其父容器的三分之一。
.uk-width-1-4 to .uk-width-3-4 元素占其父容器的四分之一
.uk-width-1-5 to .uk-width-4-5 元素占其父容器的五分之一
.uk-width-1-6 to .uk-width-5-6 元素占其父容器的六分之一

Note由于我们移除了每组单元class集中的冗余，所以例如列宽为3/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>

自动宽度 & 扩展宽度

宽度组件提供了额外的修饰，使您可以更灵活地分配项目。

Class Description
.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>

等分网格

要创建一个宽度均分的网格，无需为网格中的每个条目都重复添加相同的class。只需将.uk-child-width-* class之一添加到网格本身即可。

Class Description
.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>

如果使用分数宽度class的条目不再适合容器的宽度时，那么会截断强制换行。但在使用expand class时，将在始终在同一行均分可用空间。

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

固定宽度

除了上面的计算型的宽度class之外，还可以添加使用以下应用固定宽度的class。

Class Description
.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-* class与.uk-width-* class组合起来用于单个项。例如就可以创建这样一个网格：其中一个条目拥有特定宽度，其他条目则自动扩展以填充剩余的空间。

<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提供了许多响应式宽度class。基本上它们和普通的的宽度class一样，但是它们拥有的后缀表示从中生效的不同断点。这些类可以与Visibility 组件组合使用。这样在不同的设备尺寸下可以很好的调整布局和内容。

Class Description
.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>