如何在 Ant Design 表单中实现响应式布局？答案

【问题标题】：How to implement responsive layout in Ant Design form?如何在 Ant Design 表单中实现响应式布局？
【发布时间】：2021-03-07 20:41:34
【问题描述】：

在使用 ant design form 时，我遇到了严重的响应问题。

import { From, Input, Button } from 'antd'
const { Item } = Form;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const ExampleAntForm = () => {
{

   return (
      <Form {...layout}>
          <Item label="Name" name="username"> <Input type="text"/> </Item>
          <Item label="Password" name="password"> <Input type="password"/> </Item>
          <Item {...tailLayout}>
              <Button htmlType="submit" type="primary"> Submit </Button>
          </Item>
      </Form>
   )
}

但在这种情况下，我想根据屏幕大小应用布局。

理想情况如下，

const layout = {
   labelCol = { span: { sm: 24, md: 8, lg: 6 }}
   wrapperCol = { span: { sm: 24, md: 16, lg: 12 }}
}

如何使用 ant design Form 组件中的 layout 道具来处理这种响应？ Orr 让我知道我的问题的任何其他潜在解决方案。

【问题讨论】：

标签： reactjs layout antd ant-design-pro

【解决方案1】：

使用 Ant Design 预定义的布局，它有助于使您的表单自动响应，这是更多信息的链接 https://ant.design/components/layout

【讨论】：

感谢您的评论@lamMHC。能否附上完整的代码示例？
按屏幕尺寸处理布局，如下所示 const layout = { labelCol: { xs: { span: 24 }, sm: { span: 8 }, }, wrapperCol: { xs: { span: 24 }，sm：{跨度：16}，}，}；断点宽度 { xs: '480px', sm: '576px', md: '768px', lg: '992px', xl: '1200px', xxl: '1600px', }

【解决方案2】：

我们可以像下面这样修改布局

const layout = {
    labelCol: { xs: { span: 24 }, sm: { span: 12 }, md: { span: 8 }, lg: { span: 8 } },
    wrapperCol: { xs: { span: 24 }, sm: { span: 12 }, md: { span: 12 }, lg: { span: 12 } }
}
const tailLayout = {
    wrapperCol: { xs: { span: 24 }, sm: { span: 12, offset: 12 }, md: { span: 12, offset: 8 }, lg: { span: 12, offset: 8 } }
};

【讨论】：