如何阻止Antd表单在窗口缩小时自动切换为垂直布局？

问题描述 #

使用Ant Design 5.2.0 + React 18开发表单时，已在Form组件中设置layout={'horizontal'}，但窗口宽度缩小后表单仍会自动切换为垂直布局，希望强制保持水平布局。

解决方案 #

Ant Design的表单响应式切换是通过CSS媒体查询实现的，仅设置组件的layout属性无法覆盖媒体查询的样式，需要自定义CSS强制覆盖响应式规则：

1. 修改表单组件代码 #

给Form添加自定义类名，并调整Form.Item的布局配置：

const { Form, Input, Button, Checkbox } = antd;

class AntdClassForm extends React.Component {
  render() {
    return (
      <Form
        name="basic"
        className="fixed-horizontal-form" // 添加自定义类名
        style={{ maxWidth: 300 }}
        layout="horizontal"
        initialValues={{ remember: true }}
        autoComplete="off"
      >
        <Form.Item
          label="Username"
          name="username"
          rules={[{ required: true, message: '请输入用户名!' }]}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="Password"
          name="password"
          rules={[{ required: true, message: '请输入密码!' }]}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item 
          name="remember" 
          valuePropName="checked"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
        >
          <Checkbox>记住我</Checkbox>
        </Form.Item>

        <Form.Item 
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
        >
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

ReactDOM.createRoot(mountNode).render(<AntdClassForm />);

2. 添加自定义CSS样式 #

/* 强制表单始终保持水平布局，覆盖Antd的响应式媒体查询 */
.fixed-horizontal-form .ant-form-item {
  flex-direction: row !important;
}

.fixed-horizontal-form .ant-form-item-label {
  text-align: right;
  padding-right: 8px;
  width: auto;
}

.fixed-horizontal-form .ant-form-item-control {
  flex: 1;
}

说明 #

• 自定义类名fixed-horizontal-form用于精准定位需要修改的表单，避免影响其他表单组件
• !important用于强制覆盖Antd默认的媒体查询样式
• 显式设置labelCol和wrapperCol可以确保布局在不同屏幕下的一致性，避免原代码中偏移量导致的布局错乱

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