--- order: 10 title: 高级搜索 --- 三列栅格式的表单排列方式,常用于数据表格的高级搜索。 有部分定制的样式代码,由于输入标签长度不确定,需要根据具体情况自行调整。 ````jsx import { Form, Input, Row, Col, Button, DatePicker } from 'antd'; const FormItem = Form.Item; ReactDOM.render(
, mountNode); ```` ````css /* 定制样式 */ .ant-advanced-search-form { padding: 16px 8px; background: #f8f8f8; border: 1px solid #d9d9d9; border-radius: 6px; } /* 由于输入标签长度不确定,所以需要微调使之看上去居中 */ .ant-advanced-search-form > .row { position: relative; left: -6px; } .ant-advanced-search-form .ant-btn + .ant-btn { margin-left: 8px; } ````