当我们在使用 UIkit3 构建我们的网站或应用时，它已经提供了很多有用的 CSS 类，但有时我们会发现我们需要一些额外的宽度选项来满足我们的需求。这就是 uikit3-extra-widths 包的用武之地。本文将详细介绍如何使用这个 npm 包。
安装
首先，我们需要安装 uikit3-extra-widths 包。可以通过以下命令进行安装：
npm install uikit3-extra-widths
使用
一旦安装了这个包，我们就可以在我们的样式表中导入它，并通过使用这些新的类来自定义我们的宽度布局。
例如，我们可以使用 uk-new-width-50 类来将一个元素的宽度设置为 50%。同样的，我们也可以使用其他的类来设置其他的宽度。
下面是一些可用的类：
uk-new-width-10uk-new-width-20uk-new-width-30uk-new-width-40uk-new-width-50uk-new-width-60uk-new-width-70uk-new-width-80uk-new-width-90uk-new-width-100
这些类的工作方式与 UIkit3 的宽度类类似，因此如果您熟悉 UIkit3，那么您将能够很快找到如何使用这些类。
示例
下面是一个示例，展示了如何使用 uikit3-extra-widths 包来创建一个自定义的宽度布局：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------------- ------------------
----- ---------------- -------------------------------------------------
----- ---------------- -------------------------------------------------------------------------
-------
------
---- ---------------------
---- -------------------- -------------------- --------------- --------
-----
---- -------------- --------------- ------------ -----------------
------ ------
------
------
-----
---- -------------- --------------- ------------ -----------------
------ ------
------
------
-----
---- -------------- --------------- ------------ -----------------
------ ------
------
------
-----
---- -------------- --------------- ------------ -----------------
------ ------
------
------
------
------
------- -------------------------------------------------------
------- -------------------------------------------------------------
-------
-------在这个示例中，我们使用了 uikit3-extra-widths 包来创建自定义的宽度布局。我们使用 UK-Grid 来创建一个网格布局，并使用 uk-new-width 类来设置每个网格元素的自定义宽度。
结论
现在您已经知道如何使用 uikit3-extra-widths 包来创建自定义的宽度布局。不仅可以使用这个包来创建任何自定义的宽度，这还是一个很好的学习示例。在 UIkit3 的 CSS 类库中找到您所需的类，并使用本文提供的方法来自定义宽度布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581e81e8991b448d5491