antd中的自动换行

1. antd中<Row>里面的<Col>自动换行的办法。

    方法一:在需要换行的地方,添加一个空的<Col>标签。

                   如:<Col span={24}></Col>

     方法二:把需要进行换行的内容从From表单中取出来,用<Space>标签包裹,可实现自动换行。

                    如:原代码如下,想将重置按钮换行。

<Form>
  <Row>
    <Col>
      <Button type="primary">搜索</Button>
    </Col>
    <Col>
      <Button type={'default'}>重置</Button>
    </Col>
   </Row>
 </Form>

解决办法是:

<Form>
  <Row>
    <Col>
      <Button type="primary">搜索</Button>
    </Col>
   </Row>
 </Form>
<Space>
  <Col>
    <Button type={'default'}>重置</Button>
  </Col>
</Space>

 2. antd里面<Space>标签中自动换行的办法。

方法一:在<Space>标签中添加direction属性。

<Space direction='horizontal' style={{width:'100%'}}></Space>

方法二:在<Space>标签中,给需要换行的内容添加一个<div>进行包裹。

<Space>
  <div style={{display:'flex',flexDirection:'column'}}>
    <Button type="primary">搜索</Button>
  </div>
</Space> 

上一篇:css阻止指针事件(让按钮点击一次后置灰并且不能点击)


下一篇:formily是个什么东东?--使用感受