Анимация кнопки React-bootstrap не будет работать и кнопка не будет центрироваться

Question

У меня есть компонентact-bootstrap, и анимация загрузки не воспроизводится.

Кроме того, кнопка не будет в центре.Я могу использовать margin-left: 30px;, чтобы переместить его ближе к центру, но я не хочу, чтобы это было решением, потому что на больших экранах оно смещается от центра.Для позиционирования я использую импортированный файл CSS.

import Spinner from 'react-bootstrap/Spinner';
import { ButtonToolbar } from "react-bootstrap";
import  Button from 'react-bootstrap/Button'

class Button extends React.Component{

            ......rest of react component........

            return(
                <div>
                    <ButtonToolbar >
                    <Button variant="primary">
                        <Spinner
                        as="span"
                        animation="border"
                        size="sm"
                        role="status"
                        aria-hidden="true"
                        />
                        Loading
                    </Button>
                    </ButtonToolbar>
                </div>

Кто-нибудь знает, что я делаю неправильно или что я вообще не делаю?Спасибо за ваше время.

Answer 1

Вы можете выровнять по центру свою кнопку начальной загрузки, изменив ее контейнер, здесь <ButtonToolbar>

Примерно так:

<ButtonToolbar className="text-center d-block">
                <Button variant="primary">
                    <Spinner
                    as="span"
                    animation="border"
                    size="sm"
                    role="status"
                    aria-hidden="true"
                    />
                    Loading
                </Button>
</ButtonToolbar>

Для счетчика, есть ли у вас React Error?