跳至主要内容

文档

宽度

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

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

自动和扩展

宽度组件提供了额外的修饰符，让您在项目分配方面更灵活。

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

使用分数宽度类的项目将换行，如果它们不再适合容器的宽度。然而，当使用 扩展 类时，空间将被均匀分配到始终保持在同一行的项目中。

<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>
  • 小
    中等
    大
    特大
    超大
  • <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>