Ant Design的Row和Col间距怎么调整没效果？

雨童🍀 提问于 2026-02-16 16:00:22 阅读 55

框架

在用Ant Design布局时，按照文档给Row加了gutter属性，但左右Col之间的间距还是没变化，是什么原因啊？

代码这样写的：


<Row gutter={24}>
  <Col span={12}>左边内容</Col>
  <Col span={12}>右边内容</Col>
</Row>

试过把gutter放在Col上也不行，控制台也没报错，就是间距没生效，是不是哪里写错了？

我来解答赞 9 收藏

反馈

2 条解答

技术尚萍 Lv1

这个问题挺常见的，让我直接说原因。

gutter 属性确实要写在 Row 上，你那么写没问题。但有一种情况特别容易被忽略：gutter 的值单位是像素，而且默认是响应式的。

试试改成这种写法：



  左边内容

  右边内容

或者直接用数字也行：

真正的问题可能是：

你在浏览器开发者工具里看一下 Col 的实际样式，是不是被什么自定义 CSS 覆盖了？有时候项目里全局样式或者 Ant Design 主题配置把 margin/padding 重置了，gutter 就不生效。

还有一种情况：如果你的 Row 宽度不够（比如放在了很窄的容器里），两个 Col 被迫变成上下堆叠了，那 gutter 的水平间距就看不到了，变成了垂直间距在起作用。

检查一下这两点：容器宽度够不够、是否有 CSS 覆盖。如果还有问题，把渲染出来的 HTML 结构贴出来看看。

2026-03-13 13:05

IT人文雯 Lv1

gutter属性确实是在Row上设置的，你写法这块没问题，但有几个常见的坑容易导致它不生效。先说原因，再说解决办法。

第一种可能是样式没加载全，Ant Design的grid布局依赖它的基础样式文件，如果项目里样式引入不完整，gutter就不起作用。检查下你的样式引入，确保有这句 import 'antd/dist/reset.css'; 或者你用的是自定义主题的话，也要保证样式是完整的。

第二种情况更隐蔽，gutter其实是通过给Row设置负的margin，然后给Col设置padding来实现间距的。如果你在外层套了个容器，并且设置了overflow:hidden，那Row的负margin会被裁剪掉，间距就出不来。建议检查下外层容器的样式，把overflow:hidden去掉试试。

还有个细节要注意，gutter在开发环境可能因为css未生效会有问题，建议你重启下dev server，有时候热更新会抽风。

下面是改好的代码示例：

import React from 'react';

import { Row, Col } from 'antd';

import 'antd/dist/reset.css';



const Demo = () => (

  <div style={{ overflow: 'visible' }}>

    <Row gutter={24}>

      <Col span={12}>左边内容</Col>

      <Col span={12}>右边内容</Col>

    </Row>

  </div>

);



export default Demo;

最后吐槽一句，这种样式被父级样式干扰的问题真的很烦，我也踩过好几次坑。记得检查完这些点，基本就能解决了。

2026-02-16 16:03