React+Antd开发：Row/Col组件元素错位对齐问题求助

核心问题 #

你的布局错乱、元素重叠主要来自两个原因：

1. 输入框固定宽度超出Col范围：你给input设置了400px/300px的固定宽度，但Col的sm值对应的实际宽度可能小于这个值，导致input撑破Col，和相邻元素重叠。
2. gutter值与需求不匹配：你设置的gutter={24}会让Col之间产生24px的间距（Antd的gutter是左右各分一半，即每个Col左右padding12px），和你要的10px间距不符。

修复后的代码 #

<Row className="mt-2" gutter={10}>
  <Col sm={4}>
    <span style={{ display: 'inline-block', marginTop: '8px' }}>Upload</span>
  </Col>
  <Col sm={7}>
    <span style={{ display: 'inline-block', marginTop: '8px' }}>File Name</span>
  </Col>
  <Col sm={5}>
    <span style={{ display: 'inline-block', marginTop: '8px' }}>File Path</span>
  </Col>
</Row>
<Row className="mt-2" gutter={10}>
  <Col sm={4}>
    <Upload maxCount={1} showUploadList={false} beforeUpload={() => false}>
      <Button type='primary'>Upload</Button>
    </Upload>
  </Col>
  <Col sm={7}>
    <input style={{ height: "40px", width: "100%" }} disabled={true} />
  </Col>
  <Col sm={5}>
    <input style={{ height: "40px", width: "100%" }} />
  </Col>
</Row>

关键调整点 #

• 移除input固定宽度，改用100%自适应：让input完全填充所在Col的宽度，不会超出边界导致重叠，同时保证和上方标题的Col宽度完全对应，对齐精准。
• 调整gutter为10：这样Col之间的间距刚好是10px（每个Col左右padding5px，相邻Col之间总间距5+5=10），符合你的需求。
• 标题添加marginTop对齐控件：给标题span加marginTop:8px（可根据视觉微调），确保标题和控件在垂直方向顶部对齐更协调。

关于Col未占满屏幕的疑问 #

完全可以。Antd的Col组件不管总跨度（sm值总和）是否达到24，只要设置了gutter，相邻Col之间都会保持你设置的间距。比如你这里sm总和是4+7+5=16<24，剩余空间会自动留白，Col之间的10px间距依然生效。

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