Ant Design v4升级后Radio.Group导致布局破裂问题咨询及解决方案求助

我刚好碰到过类似的情况，这其实不是 Ant Design 的 Bug，而是 v3 到 v4 升级时 Radio.Group 的默认布局实现发生了隐性调整——官方文档里可能把这个细节放在了样式调整的小节里，容易被忽略。

问题根源 #

Antd v3 的 Radio.Group 默认是 display: inline-block 布局，不会强制子元素使用弹性布局；但 v4 为了优化水平/垂直布局的一致性，把 Radio.Group 的默认样式改成了 display: flex。当你把 Row 直接放在 Radio.Group 内部时，Row 会被当作 flex 容器的子元素，默认宽度会被压缩成内容宽度，导致嵌套的 Col 布局彻底错乱，出现文本无法显示的问题。

解决方案 #

这里有几种靠谱的解决方式，你可以根据自己的代码结构选择：

方案1：强制 Radio.Group 恢复块级布局（最快适配）

给 Radio.Group 添加 style={{ display: "block" }}，让它回到 v3 类似的布局行为，这样内部的 Row 就能正常占满宽度：

<Radio.Group value={value} onChange={onChange} style={{ display: "block" }}>
  <Row gutter={16}>
    <Col span={8}>
      <Radio value="1">选项1：这是一段较长的文本内容，测试是否能正常显示</Radio>
    </Col>
    <Col span={8}>
      <Radio value="2">选项2</Radio>
    </Col>
    <Col span={8}>
      <Radio value="3">选项3</Radio>
    </Col>
  </Row>
</Radio.Group>

方案2：调整 DOM 结构（更符合 v4 设计规范）

Radio.Group 的设计初衷是包裹 Radio 组件本身，而不是布局容器。更规范的写法是把布局容器（Row/Col）放在 Radio.Group 外部，让 Radio.Group 只负责管理 Radio 的分组逻辑：

<Row gutter={16}>
  <Radio.Group value={value} onChange={onChange}>
    <Col span={8}>
      <Radio value="1">选项1：这是一段较长的文本内容，测试是否能正常显示</Radio>
    </Col>
    <Col span={8}>
      <Radio value="2">选项2</Radio>
    </Col>
    <Col span={8}>
      <Radio value="3">选项3</Radio>
    </Col>
  </Radio.Group>
</Row>

方案3：利用 Radio.Group 的 direction 属性配合布局

如果你想保留 Radio.Group 的 flex 布局特性，可以给它设置 direction="horizontal"，同时给内部的 Row 添加 width: 100% 确保布局容器占满宽度：

<Radio.Group value={value} onChange={onChange} direction="horizontal">
  <Row gutter={16} style={{ width: "100%" }}>
    <Col span={8}>
      <Radio value="1">选项1：这是一段较长的文本内容，测试是否能正常显示</Radio>
    </Col>
    <Col span={8}>
      <Radio value="2">选项2</Radio>
    </Col>
    <Col span={8}>
      <Radio value="3">选项3</Radio>
    </Col>
  </Row>
</Radio.Group>

总结 #

这个问题的核心是 v4 对 Radio.Group 的布局实现做了底层调整，如果你习惯了 v3 里把布局容器嵌套在 Radio.Group 里的写法，只需要通过强制修改 display 属性或者调整 DOM 结构就能快速修复。

内容的提问来源于stack exchange，提问作者kataba