引导轮播未在 reactjs 中显示

Question

您好，我已经使用标准 npm install react-bootstrap bootstrap 命令安装了 bootstrap，并从 bootstrap 站点实现了轮播代码，但我没有得到轮播。图片正在一张一张显示这是我的代码

import React, {Component} from 'react';
**import {Carousel} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';**
import CleanHands from '../Images/cleanhands.jpg';
import Heroes from '../Images/heroes.jpg';  

class ImageCarousel extends Component {

    render() {
        return(
                <Carousel>
                    <Carousel.Item>
                        <img
                        className="d-block w-100"
                        src={CleanHands}
                        alt="First slide"
                        style={{width:"40px", height:"40px"}}
                        />
                    </Carousel.Item>
                    <Carousel.Item>
                        <img
                        className="d-block w-100"
                        src={Heroes}
                        alt="Third slide"
                        />
                    </Carousel.Item>

                    <Carousel.Item>
                        <img
                        className="d-block w-100"
                        src={CleanHands}
                        alt="Third slide"
                        />
                    </Carousel.Item>
                </Carousel>

        );
    }
}

export default ImageCarousel;

Answer 1

你需要在你的 App.jsx 中导入 bootstrap css：

// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

我可以看到你的轮播中有它，但你应该在 App 中导入它。此外，您需要按照文档在其Getting Started section 中的说明安装引导程序。

这是我需要让旋转木马工作on my repro on Stackblitz