Поместите кнопку формы AntD на тот же уровень, что и входы

Question

Это мой компонент с AntD Form.

import React, { PureComponent } from 'react';
import { Form, Input, Button } from 'antd';
import './home-page.scss';

class HomePageContainer extends PureComponent {
  render() {
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 }
    };

    const buttonItemLayout = {
      wrapperCol: { span: 14 }
    };

    return (
      <div className='contact-company-container'>
        <div className='contact-company-card-container'>
          <div className='contact-company-card'>
            <p>some text</p>
            <p>another text</p>
            <Form layout='inline'>
              <Form.Item label='Pnone Number' {...formItemLayout}>
                <Input placeholder='+77 926 12' />
              </Form.Item>
              <Form.Item label='Email' {...formItemLayout}>
                <Input />
              </Form.Item>
              <Form.Item {...buttonItemLayout}>
                <Button>Отправить</Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    );
  }
}

export default HomePageContainer;

Как мне поставить два Input s и Button на одном (горизонтальном) уровне? То есть я хочу, чтобы они были правы друг с другом без пробелов.

Попытка установить labelCol и wrapperCol на { span: 24 }, что оставляет Button на следующей строке.

Answer 1

Вот как я сейчас решил это. На основании примера «Расширенный поиск» на https://ant.design/components/form.

Возможно, это не лучшее решение поставить пустую ( ) label выше Button. Предложения приветствуются.

class HomePageContainer extends PureComponent {
  render() {
    const formItemLayout = {
      labelCol: { span: 24 },
      wrapperCol: { span: 24 }
    };

    const buttonItemLayout = {
      labelCol: { span: 24 },
      wrapperCol: { span: 24 }
    };

    return (
      <div className='contact-company-container'>
        <div className='contact-company-card-container'>
          <div className='contact-company-card'>
            <p>abcdef</p>
            <p>ghjklu</p>
            <Form layout='inline'>
              <Row gutter={24}>
                <Col span={8}>
                  <Form.Item label='phone' {...formItemLayout}>
                    <Input placeholder='+77 926 12' />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label='email' {...formItemLayout}>
                    <Input />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label='&nbsp;' {...buttonItemLayout}>
                    <Button>Send</Button>
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </div>
        </div>
      </div>
    );
  }
}