Не отрабатывает в react-bootstrap

Question

Пробую освоить учебный проект. Там используют React и React-Bootstrap. Делаю обычное окно авторизации и не могу добиться толку: компонент ROW не слушается команды. Да и по всему проекту видно, что не подтягивает "сокращения": вместо "ml-2" предлагает "m-lg-2". Помогите разобраться новичку, пожалуйста. Может нужно что-то еще установить или прописать куда этому собрату skynet?..

Вот все установленные плюшки:

"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.22.0",
"bootstrap": "^5.1.1",
"mobx": "^6.3.3",
"mobx-react-lite": "^3.2.1",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0-rc.0",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"},

А вот собственно сам код, который необходимо победить...

 import React from 'react';
 import {Button, Card, Container, Form} from "react-bootstrap";
 import Row from "react-bootstrap/Row";
 import {NavLink} from "react-router-dom";
 import {REGISTRATION_ROUTE} from "../utils/consts";

const Auth = () => {
return (
    <Container
        className="d-flex justify-content-center align-items-center"
        style={{height: window.innerHeight - 54}}
    >
        <Card style={{width: 600}} className="p-5">
            <h2 className="m-auto">Авторизация</h2>
            <Form className="d-flex flex-column">
                <Form.Control
                    className="mt-3"
                    placeholder="Введите email"
                />
                <Form.Control
                    className="mt-3"
                    placeholder="Введите password"
                />
                <Row className="d-flex justify-content-between mt-3 pl-3 pr-3">
                    <div>
                        Хотите создать аккаунт? <NavLink to={REGISTRATION_ROUTE}>Ходь сюды! 
                        </NavLink>
                    </div>
                    <Button
                        className="align-self-end"
                        variant={"outline-danger"}
                    >
                        Войти
                    </Button>
                </Row>
            </Form>
        </Card>

    </Container>
    );
   };

export default Auth;

Answer 1

Сработала такая схема: после Row подключил еще Col и все стили перенес туда:

   <Row>
    <Col className="d-flex justify-content-between mt-3 ps-3 pe-3">
     {isLogin ?
      <div> Хотите аккаунт? 
       <NavLink to={REGISTRATION_ROUTE}>Ходь сюды! 
       </NavLink>
      </div>
      :
      <div>Аккаунт есть??? <NavLink to={LOGIN_ROUTE}>Тады сюды!
       </NavLink>
      </div>
      }
      <Button
       variant={"outline-danger"}
       >
       {isLogin ? 'Войти' : 'Регистрация'}
      </Button>
     </Col>
   </Row>

Также, вместо pr-3 написал pe-3. На сколько я понимаю, вместо right нужно писать End. В общем продолжаю грызть эту нелегкую но интересную версию css под названием react-bootstrap 5.

БЛОГ НА HUSL

Не отрабатывает в react-bootstrap

Ответы (1 шт):