网格列相距太远

Question

我目前正在使用 React 中的 ant design 设计登录页面。我尝试使用网格系统来设计登录页面。但是，我遇到了这个问题，因为我的列彼此相距太远。我想缩小他们之间的差距。下面是我的问题截图：

下面是我的代码

import React from 'react'; import { Row, Alert, Col, Form, Input, Button, Checkbox, Card } from 'antd'; import { UserOutlined, MailOutlined, LockOutlined } from '@ant-design/icons';

const Register = () => {   const onSubmit = (values) => {};

  return (
    <>
      <Row
        justify='center'
        align='middle'
        style={{ height: '100vh', flexWrap: 'wrap' }}
      >
        <Row style={{ width: '100%' }} justify='center'>
          <Col xs={18} md={8}>
            <Alert type='error' message='User already exist' banner />
          </Col>
        </Row>

        <Col xs={18} md={8} style={{ width: '100%' }}>
          <Card className='login-card'>
            <Form
              name='normal_login'
              className='login-form'
              initialValues={{
                remember: true,
              }}
              onFinish={onSubmit}
            >
              <h1 id='signin-header'>Register</h1>

              <Form.Item
                name='name'
                rules={[
                  {
                    required: true,
                    message: 'Please input your name!',
                  },
                ]}
                hasFeedback
              >
                <Input
                  prefix={<UserOutlined className='site-form-item-icon' />}
                  placeholder='Name'
                />
              </Form.Item>

              <Form.Item
                name='email'
                rules={[
                  {
                    required: true,
                    message: 'Please input your email!',
                  },
                  {
                    type: 'email',
                    message: 'Please input a valid email!',
                  },
                ]}
                hasFeedback
              >
                <Input
                  prefix={<MailOutlined className='site-form-item-icon' />}
                  placeholder='Email'
                />
              </Form.Item>

              <Form.Item
                name='password'
                rules={[
                  {
                    required: true,
                    message: 'Please input your password!',
                  },
                ]}
                hasFeedback
              >
                <Input.Password
                  placeholder='Password'
                  prefix={<LockOutlined className='site-form-item-icon' />}
                />
              </Form.Item>
              <Form.Item>
                <Form.Item name='remember' valuePropName='checked' noStyle>
                  <Checkbox>Remember me</Checkbox>
                </Form.Item>
              </Form.Item>

              <Form.Item>
                <Button type='primary' htmlType='submit' block>
                  Register
                </Button>
                <div id='register-text'>
                  Arleady have an account? Login now!
                </div>
              </Form.Item>
            </Form>
          </Card>
        </Col>
      </Row>
    </>   ); };

export default Register;

Answer 1

尝试在第一行使用alignItems: 'stretch'。

...
  <Row
        justify='center'
        align='middle'
        style={{ height: '100vh', flexWrap: 'wrap', alignItems: 'stretch' }}
      >
        <Row style={{ width: '100%', marginBottom: '10px' }} justify='center' align="bottom">
...

工作CodeSandBox