为什么我的UIkit栅格在移动端显示错乱？

司马树萱提问于 2026-01-31 08:15:31 阅读 46

组件

大家好，我在用UIkit做响应式布局时遇到个问题。设置了uk-grid的两列在桌面端显示正常，但手机端左侧列突然变窄挤在一起，原本应该堆叠的布局反而并排了。

我试过把列的class改成uk-width-1-2@m和uk-width-1-2@s，还加了uk-hidden-medium隐藏部分内容，但手机上看还是挤成一片。控制台检查发现媒体查询生效了，但列宽度好像被其他样式覆盖了。

这是我的代码片段：


<div uk-grid>
  <div class="uk-width-1-2@s uk-width-1-3@m">左侧内容</div>
  <div class="uk-width-1-2@s uk-width-2-3@m">右侧内容</div>
</div>

样式表里还有自定义的.uk-grid { max-width: 1200px }，会不会影响响应式？用uk-grid的breakpoint配置也没解决，求指点

前端框架响应式设计

我来解答赞 10 收藏

反馈

2 条解答

シ付楠 Lv1

你的问题出在 uk-width-1-2@s 这个类的使用上。UIkit 的断点规则里，@s 是默认开启响应式的最小断点，也就是说这个类会让左侧列在所有屏幕尺寸下都保持 50% 宽度，自然不会堆叠。

建议改成这样：

<div uk-grid>

  <div class="uk-width-1-1 uk-width-1-3@m">左侧内容</div>

  <div class="uk-width-1-1 uk-width-2-3@m">右侧内容</div>

</div>

这样设置后，在小屏幕（移动端）上两列都会变成 100% 宽度自动堆叠，从 @m 开始才会应用你定义的宽度比例。

另外，自定义的 .uk-grid { max-width: 1200px } 不会影响响应式表现，可以保留。但如果你还用到其他全局样式覆盖了 UIkit 的默认样式，可能需要检查一下优先级问题。

最后提醒一句，UIkit 的 breakpoint 配置有时会让人摸不着头脑，直接用明确的宽度类通常更可靠。

2026-02-02 13:11

❤可馨 Lv1

问题应该出在你的自定义样式 .uk-grid { max-width: 1200px } 上。虽然这个样式本身没问题，但它可能会和 UIkit 的响应式栅格系统产生冲突，特别是当你没有正确设置断点或列宽时。

先说解决方案：把你的代码改成这样：

<div uk-grid>

  <div class="uk-width-1-1@s uk-width-1-3@m">左侧内容</div>

  <div class="uk-width-1-1@s uk-width-2-3@m">右侧内容</div>

</div>

这里的关键是把小屏幕的宽度改成了 uk-width-1-1@s，也就是让两列在小屏幕上占满整个宽度。原来的 uk-width-1-2@s 是想让两列并排显示，但在手机上屏幕太窄了，就会挤在一起。

另外，你提到的 uk-hidden-medium 已经被废弃了，现在要用 uk-visible@medium 或 uk-hidden@medium 这种新的语法。

最后提醒一下，UIkit 的栅格系统对断点很敏感，建议严格按照官方推荐的类名组合来写，不然很容易出现这种“奇怪”的布局问题。如果你还有其他样式覆盖，可以用浏览器开发者工具检查一下具体是哪个规则生效了。

2026-01-31 13:06