【React】antd中Form和栅格组成实现响应式布局中formItemLayout内容详解

目录

一、官网样例

二、formItemLayout内容解释

1、解释准备阶段

2、labelCol含义

3、wrapperCol含义

4、xs、sm、md、lg、xl、xxl

5、示例中使用解释

① labelCol中xs为24，wrapperCol中xs为24。

② labelCol中sm为8，wrapperCol中sm为16。

---

之前在编写代码过程中一度不理解formItemLayout中labelCol和wrapperCol以及中填写内容都表示什么（主要还是太菜，心疼的抱住拉胯的自己）

还在论坛里问了问题，但是没有人回答我（可能是觉得问题太简单了），哭得更大声了

一、官网样例

在antd官网的Form表单使用的实例中抽一个作为解释案例

样式：

代码：

二、formItemLayout内容解释

1、解释准备阶段

示例中是将栅格和Form表单合起来使用的，因为栅格是支持响应式布局，能够根据页面的分辨率进