Grid栅格布局为什么在小屏幕上错位了？

皇甫清梅提问于 2026-02-28 17:09:18 阅读 9

组件

我用的是 Ant Design 的 Grid 栅格系统，本来在桌面端显示正常，但一到手机上就乱了。明明写了 xs={24} sm={12} md={8} 这种响应式配置，结果小屏时两个元素挤在一起，根本没换行。

是不是漏了什么设置？还是说要额外加 CSS？我已经确认 viewport meta 标签是有的：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Grid栅格布局组件

我来解答赞 1 收藏

反馈

1 条解答

Zz欣炅 Lv1

这个问题我之前也踩过坑，大概率是几个原因：

第一，检查一下你的 Col 组件是不是被 Row 包裹住了。Ant Design 的栅格系统，Col 必须是 Row 的直接子元素才能生效，要是中间套了层 div 或者别的容器，flex 布局就断了，响应式自然全乱。

正确的写法应该是这样：



  内容1

  内容2

  内容3

第二，看看有没有全局样式污染。有些老项目里会有那种全局 reset，把 box-sizing 设成 content-box，或者给所有 div 加了 padding/margin。栅格系统依赖 box-sizing: border-box，被覆盖的话宽度计算就崩了。可以在浏览器开发者工具里检查一下 Col 元素的 computed 样式。

第三，父容器宽度的问题。如果你的 Row 被放在一个固定宽度的容器里，比如写死了 width: 1200px，那在小屏幕上容器本身就不会缩放，里面的栅格自然跟着乱。确保父容器是流式的，或者用 max-width 代替 width。

第四，gutter 的坑。如果你给 Row 设置了 gutter，它会用负 margin 来抵消间距，但要是父容器有 overflow: hidden，两边的 padding 就会被切掉，视觉上看起来像错位。

最后说一句，xs={24} 的意思是超小屏幕下占满整行，如果两个元素挤在一起没换行，说明 xs 配置根本没生效。打开开发者工具，看元素上有没有 ant-col-xs-24 这个 class，没有的话就是断点判断出问题，有 class 但样式不对，那就是 CSS 被覆盖了。

2026-02-28 23:43