Antd响应式Input在xs屏幕尺寸下布局异常问题求助

核心原因 #

Antd Form的horizontal布局默认会在**xs断点（<576px）**自动切换为垂直布局（标签在上、控件在下），这是框架内置的响应式适配逻辑，并非bug。你设置的labelCol和wrapperCol仅在水平布局生效，当xs断点自动切换为垂直布局后，这些配置会被忽略；同时外层Col未配置xs断点的参数，导致布局宽度超出预期。

解决步骤 #

1. 强制全局水平布局：给外层ProForm（或Form）添加layout="horizontal"属性，确保所有断点都保持水平布局逻辑。
2. 响应式配置列参数：给labelCol和wrapperCol补充xs断点的配置，明确指定不同屏幕下的占比。
3. 补全外层Col的响应式配置：给外层Col添加xs断点的span和offset，避免xs下元素占满整行。

修改后的代码示例 #

<Row>
  <Col xs={{ span: 20, offset: 2 }} sm={{ span: 12, offset: 6 }}>
    <ProFormText 
      name="name" 
      label="Username" 
      labelCol={{ xs: 12, sm: 12 }}
      wrapperCol={{ xs: 12, sm: 12 }}
    />
  </Col>
</Row>

优化建议 #

如果页面存在多个表单控件，建议在根ProForm上统一配置布局和列参数，避免重复设置：

<ProForm
  layout="horizontal"
  labelCol={{ xs: 12, sm: 12 }}
  wrapperCol={{ xs: 12, sm: 12 }}
>
  <Row>
    <Col xs={{ span: 20, offset: 2 }} sm={{ span: 12, offset: 6 }}>
      <ProFormText name="name" label="Username" />
    </Col>
  </Row>
</ProForm>

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