Блог

В настоящее время я разрабатываю страницу входа, используя ant design в React. Я попытался использовать систему grid для разработки страницы входа. Однако я застрял с этой проблемой, когда мои столбцы расположены слишком далеко друг от друга. Я хотел бы сократить разрыв между ними. Ниже приведен скриншот моей проблемы:

Ниже приведен мой код

 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;
  

Попробуйте использовать 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