uk-grid 未生效主因是未执行 javascript 初始化；需确保 uikit 加载完成并调用 uikit.update()，子元素须为直接子节点，加 uk-grid=”gutter: 20″ 才有间距。
UIkit 的 uk-grid 为什么没生效？
常见现象是加了 uk-grid 类但子元素还是垂直堆叠，间距也没出来。根本原因不是没引入 css，而是 UIkit 的网格系统依赖 JavaScript 初始化——哪怕你只用纯 CSS 类，也得确保 UIkit 已加载并执行过一次 UIkit.update() 或页面已就绪。
- 确认
uikit.min.js在 HTML 底部或domContentLoaded后加载，且无 404 -
uk-grid默认不带 gutter，要加uk-grid="gutter: 20"才有间距（注意引号和等号格式） - 子元素必须是直接子节点，嵌套一层
div就失效；如需包裹，用uk-grid-margin替代 - 响应式断点如
uk-child-width-1-2@s要配合uk-grid使用，单独写无效
如何让 uk-modal 正确显示并支持关闭？
modal 打不开、点背景不关闭、按 ESC 没反应，通常不是配置错，而是结构破坏了 UIkit 的 DOM 假设：它要求 uk-modal 容器必须是 <div>，且内部必须有 <code>uk-modal-dialog 子元素，否则 JS 初始化直接跳过。
- 不要把
uk-modal加在<a></a>或<button></button>上——触发器和模态框必须分离；用href="#my-id"或uk-toggle="target: #my-id" -
uk-modal元素需在级别，不能被display: none父容器包着，否则尺寸计算错误 - 关闭按钮必须带
uk-modal-close类，或手动调用UIkit.modal(element).hide() - 如果 modal 内含表单，提交后需手动调用
UIkit.modal(element).hide()，它不会自动监听 submit
使用 uk-sticky 时页面抖动或定位错乱
滚动中 header 突然跳动、脱离预期位置，多数因为 sticky 组件依赖父容器的静态高度计算，而父容器本身受 flex、grid 或图片异步加载影响，导致初始高度为 0 或不稳定。
- 确保
uk-sticky直接作用的元素父级有明确高度（比如min-height: 100vh），避免“塌陷” - 图片未加载完前，
uk-sticky可能误判滚动边界；加uk-img并设置data-src，或先给图片设固定宽高 - 不要在 sticky 元素上同时用
uk-animation-slide-top等动画类——CSS 动画会干扰 sticky 的 position 切换逻辑 - 移动端 safari 下，sticky 在 overscroll 时可能卡住，加
uk-sticky="bottom: true"或改用position: -webkit-sticky替代
UIkit 与 Vue/React 共存时事件丢失或重复初始化
在 Vue 组件里反复挂载/卸载含 uk-* 属性的 DOM，UIkit 不会自动销毁旧实例，导致多次绑定 click、重复监听 resize，甚至内存泄漏。
立即学习“前端免费学习笔记（深入）”；
- 手动管理生命周期：Vue 的
beforeUnmount中调用UIkit.getComponents(element)获取实例，再逐个.$destroy() - 避免在 v-for 渲染中直接写
uk-dropdown—— 改用uk-dropdown="mode: click"配合动态uk-toggle触发器 - React 中不要用
useEffect每次都调UIkit.util.ready()，改用UIkit.update(element)局部刷新 - 所有通过 JS 创建的组件（如
UIkit.notification()），记得保存返回值并在不需要时调.close()
UIkit 的“约定大于配置”很省事，但它的 DOM 依赖和隐式初始化也是最常出问题的地方。别信“加个 class 就好”，每个 uk- 行为背后都有 JS 在观察、计算、重排——只要结构或加载时机差一点，它就不说话，也不报错。