时间戳

首页 > 解决方案 > React-bootstrap 按钮动画将不起作用并且按钮不会居中

css - React-bootstrap 按钮动画将不起作用并且按钮不会居中

问题描述

我有一个 react-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>

有谁知道我做错了什么或我根本没有做什么？感谢您的时间。

标签： cssreactjsreact-bootstrap

解决方案

您可以通过修改其容器来居中对齐引导按钮，这里<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 错误吗？

推荐阅读