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

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

框架

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

代码这样写的：


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

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

我来解答赞 2 收藏

反馈

1 条解答

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