Col列组件的span属性不生效是怎么回事？ ___彦霞 提问于 2026-02-25 20:14:21 阅读 20 组件 我用的是Ant Design Vue的布局组件，明明给Col设置了span=”6″，但页面上还是占满整行，根本没按24格栅格来分。是不是哪里漏了？ 我已经在外层套了Row，也引入了样式文件，但就是不生效。试过改成offset也没用，控制台也没报错。 <a-row> <a-col :span="6">左侧菜单</a-col> <a-col :span="18">主内容区</a-col> </a-row> Col列 我来解答 赞 3 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 Designer°静静 Lv1 你这个写法本身没问题，span="6" 确实应该占 6/24 宽，也就是四分之一屏。既然没报错又套了 Row，那大概率是样式被覆盖了，或者用了自定义布局类把栅格挤没了。 先做个校验：打开浏览器开发者工具，选中那个 元素，看看它的 computed 样式里 width 是不是 25%（或者接近的值），再看看有没有 flex: 0 0 100% 之类的强制占满样式。如果有，那基本就是外部样式干扰了。 常见几个坑我列一下你对一对： - 你用的 Ant Design Vue 版本是不是 3.x？2.x 和 3.x 的栅格实现有差异，3.x 强制依赖 flex 布局，如果父级 Row 被加了 display: block 就全废了； - 你有没有全局样式里写了 .col { width: 100% } 或者类似通配规则？比如某些 UI 框架或重置样式会干扰； - Row 上有没有加 justify、align 之外的自定义 class？有些项目会自己封装 Row，不小心把 flex-wrap: wrap 给关了； - 你是不是用了 display: none 或者 visibility: hidden 的父级包裹？这种虽然不报错但会让子元素“看起来不生效”。 另外建议你先删掉所有自定义 class，只保留最简结构，确认基础栅格能跑起来再加其他东西，避免叠加样式踩坑。 如果还是不行，贴下你 Row 的完整代码和浏览器里 inspect 到的 col 的 computed 样式，我帮你看看是不是有隐藏的样式冲突。 回复 点赞 2 2026-02-25 20:16 加载更多 相关推荐
span="6"确实应该占 6/24 宽，也就是四分之一屏。既然没报错又套了 Row，那大概率是样式被覆盖了，或者用了自定义布局类把栅格挤没了。先做个校验：打开浏览器开发者工具，选中那个
width是不是25%（或者接近的值），再看看有没有flex: 0 0 100%之类的强制占满样式。如果有，那基本就是外部样式干扰了。常见几个坑我列一下你对一对：
- 你用的 Ant Design Vue 版本是不是 3.x？2.x 和 3.x 的栅格实现有差异，3.x 强制依赖 flex 布局，如果父级 Row 被加了
display: block就全废了；- 你有没有全局样式里写了
.col { width: 100% }或者类似通配规则？比如某些 UI 框架或重置样式会干扰；- Row 上有没有加
justify、align之外的自定义 class？有些项目会自己封装 Row，不小心把flex-wrap: wrap给关了；- 你是不是用了
display: none或者visibility: hidden的父级包裹？这种虽然不报错但会让子元素“看起来不生效”。另外建议你先删掉所有自定义 class，只保留最简结构，确认基础栅格能跑起来再加其他东西，避免叠加样式踩坑。
如果还是不行，贴下你 Row 的完整代码和浏览器里 inspect 到的 col 的 computed 样式，我帮你看看是不是有隐藏的样式冲突。