UIkit 的网格布局怎么不生效? 设计师俊宇 提问于 2026-03-24 11:10:20 阅读 54 组件 我用 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> UI框架 我来解答 赞 11 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 宇文熙苒 Lv1 UIkit 的网格布局不生效可能是因为默认情况下,uk-grid 类不会自动应用响应式样式或者需要额外的包裹容器。推荐的做法是确保你的 HTML 结构符合 UIkit 的规范,并且添加必要的类来触发网格行为。 首先,检查你的 uk-grid 容器是否有一个 uk-container 或者其他合适的父容器。其次,确保你包含了 UIkit 的 JavaScript 文件,因为某些动态行为依赖于它。 修改后的代码示例如下: 左边 右边 注意这里在 uk-grid 上添加了 uk-grid 属性,并且外面包裹了一个 uk-container。这样可以确保网格系统正常工作。如果问题依然存在,建议检查浏览器控制台是否有错误信息,或者确认所有 UIkit 文件都已正确加载。 回复 点赞 2026-03-24 11:17 加载更多 相关推荐 1 回答 44 浏览 UIkit网格在Vue里不生效是怎么回事? 我在Vue项目里引入了UIkit,想用它的Grid布局,但写完发现列没按预期排列,全都堆在一起了。是不是哪里漏了? 我已经在main.js里import 'uikit/dist/css/uikit.m... 子儒 组件 2026-03-29 14:17:16 1 回答 44 浏览 UIkit 的响应式网格在 React 中不生效是怎么回事? 我用 UIkit 做了一个简单的响应式布局,但在 React 项目里移动端根本不按预期堆叠,还是横着排。明明加了 uk-grid 和 uk-child-width-1-2@s 这些类,本地 HTML ... Des.永莲 组件 2026-03-19 08:02:23 1 回答 48 浏览 UIkit 布局中子元素高度不随父容器撑开怎么办? 我用 UIkit 的 uk-grid 做了一个两栏布局,左边是侧边栏,右边是主内容区。明明给父容器设了 min-height: 100vh,但子项的高度却没被撑满,背景色只显示内容高度那一点。 试过加... 程序员付楠 组件 2026-03-26 19:35:19 2 回答 68 浏览 UIkit动画在Vue中不生效是怎么回事? 我在Vue组件里用UIkit的uk-animation-slide-left类做入场动画,但根本没效果,是哪里写错了吗? 已经引入了UIkit的CSS和JS,其他组件比如Modal都能正常用,就动画不... 红静 ☘︎ 组件 2026-03-22 11:03:20 2 回答 100 浏览 UIkit 的滑动动画怎么不生效? 我在用 UIkit 做一个下拉菜单,想加个滑动展开的动画效果,但加上 uk-toggle 和 uk-animation-slide-top 后完全没反应,元素直接显示/隐藏了,动画一点没出来。 我查了... 夏侯绍博 组件 2026-03-17 14:56:21 1 回答 44 浏览 UIkit组件样式不生效是怎么回事? 我在Vue项目里引入了UIkit,但写出来的按钮完全没有UIkit的样式,控制台也没报错,是不是哪里配置漏了? 我按文档在main.js里import了CSS,组件里也加了uk-button类名,但按... 轩辕培珍 组件 2026-03-12 22:05:21 2 回答 39 浏览 UIkit Sortable 排序后怎么获取新的顺序? 我用 UIkit 的 sortable 组件做了一个拖拽排序列表,但拖完之后不知道怎么拿到最新的元素顺序。文档里没太看明白,试了 change 事件但好像没触发? 我的 HTML 结构大概是这样: &... 爱学习的姿言 组件 2026-03-12 12:17:21 2 回答 55 浏览 UIkit 组件样式不生效是怎么回事? 我用 UIkit 写了个按钮,但自定义的 class 样式完全没效果,是不是被 UIkit 的默认样式覆盖了? 我试过在 <button class="uk-button my-btn">... 皇甫月怡 组件 2026-03-03 14:09:20 2 回答 95 浏览 UIkit Sticky导航栏滚动到顶部时突然消失怎么办? 我在用UIkit的Sticky组件做固定导航栏,滚动到页面顶部时导航栏突然消失了,但往下拉又会出现,这是怎么回事? 代码结构是这样的: <nav class="uk-navbar-contain... 诗雅 组件 2026-02-14 06:09:24 1 回答 45 浏览 UIkit导航菜单在移动端不显示下拉箭头怎么办? 我用UIkit做了个带下拉菜单的导航栏,桌面端正常,但手机上点开菜单后子项没有下拉箭头图标,用户根本不知道还能展开。试过加.uk-nav-parent-icon类,还是没效果。 这是我的CSS: .u... 迷人的金静 组件 2026-03-26 08:47:22
uk-grid类不会自动应用响应式样式或者需要额外的包裹容器。推荐的做法是确保你的 HTML 结构符合 UIkit 的规范,并且添加必要的类来触发网格行为。首先,检查你的
uk-grid容器是否有一个uk-container或者其他合适的父容器。其次,确保你包含了 UIkit 的 JavaScript 文件,因为某些动态行为依赖于它。修改后的代码示例如下:
注意这里在
uk-grid上添加了uk-grid属性,并且外面包裹了一个uk-container。这样可以确保网格系统正常工作。如果问题依然存在,建议检查浏览器控制台是否有错误信息,或者确认所有 UIkit 文件都已正确加载。