UIkit 的网格布局怎么不生效?

设计师俊宇 阅读 12

我用 UIkit 写了个简单的两列布局,但元素还是堆在一起没分行。

明明加了 uk-grid 类,也引入了 UIkit 的 CSS 和 JS,咋回事?

<div class="uk-grid">
  <div class="uk-width-1-2">左边</div>
  <div class="uk-width-1-2">右边</div>
</div>
我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
宇文熙苒
UIkit 的网格布局不生效可能是因为默认情况下,uk-grid 类不会自动应用响应式样式或者需要额外的包裹容器。推荐的做法是确保你的 HTML 结构符合 UIkit 的规范,并且添加必要的类来触发网格行为。

首先,检查你的 uk-grid 容器是否有一个 uk-container 或者其他合适的父容器。其次,确保你包含了 UIkit 的 JavaScript 文件,因为某些动态行为依赖于它。

修改后的代码示例如下:


左边

右边




注意这里在 uk-grid 上添加了 uk-grid 属性,并且外面包裹了一个 uk-container。这样可以确保网格系统正常工作。如果问题依然存在,建议检查浏览器控制台是否有错误信息,或者确认所有 UIkit 文件都已正确加载。
点赞
2026-03-24 11:17