跳至主要內容

文件

寬度

定義元素在不同視窗尺寸下的寬度。

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