antd表单文字垂直居中、行距与item大小_antd form 居中_菜小猿的博客

<Input placeholder={`输入文字`} size={"large"}/>
二、垂直居中
 如图：当设置item的size为large时，此时文字没有居中了
 
 解决：因为item的大小为large了，但是文字的大小还是默认大小，所以和item大小保持一致就行 
   layout="horizontal" 
   onFinish={this.onFinish}
   onFinishFailed={this.onFinishFailed}
   labelCol={{ span: 5}}
   ref={e => this.form = e}
   initialValues={{size: "large"}}
   size={"large"} // size大小与item保持一致
三、行距
 此时行距出现过大，与要求不符
 
 解决：可以依据样式 marginBottom 进行调整 
<Row gutter={24} key={variableName} style={{marginBottom: '-1vh'}}>{/*根据样式进行设置*/}
  <Col span={span} key={i}>
      <FormItem
          name={variableName}
          label={str}
          rules={required ? [{ required: true, message: `请输入${str}` }] : null}
          <Input placeholder={`输入文字`} size={"large"}/>
      </FormItem>
    </Col>
</Row>
                                    不知道大家在网页制作的时候有没有发现，在插入表单form后，往往在form的上下都会空出一行，这样一来网页的排版就很难看了，所以今天就教大家解决插入表单form出现空行的方法。 
其实表单form上下出现的空行并不是真正的空行，而是表单form自带了一个默认的margin值，只是这个值并且不等于0，所以我们只需要用css控制form的margin=0就可以解决这一问题了，CSS代码如下： 
复制代码代码如下:form{margin: 0px;}
from.validateFields((err, val)=> {}) // 无响应
发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动添加字段名校验, 终于, 错误的原因浮现出来了
from.validateFields([n
 * @LastEditTime: 2022-02-22 15:19:03
 * @LastEditors: Mao 
 * @Description: In User Settings Edit
 * @FilePath: \archives-web\src\components\myComponen
                                    如图所示，当前有一个StepsForm表单，代码如下(基本就是官网的示例修改的)const Demo: React.FC = () => {const Option = [{key: '1',value: '111',label: '个人'},{key: '2',value: '222',label: '合作'},]const waitTime = (time: number = 100) ...
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
    labelAlign: 'left'//***  既可以在From中使用 可以在Item中使用；具体看文档
组件中引入：
            {...formLayout}
            form={form}
                                    如图所示，当前有一个StepsForm表单，代码如下(基本就是官网的示例修改的)const Demo: React.FC = () => {const Option = [{key: '1',value: '111',label: '个人'},{key: '2',value: '222',label: '合作'},]const waitTime = (time: number = 100) ...