引导轮播未显示在 reactjs 中

Question

嗨，我已经使用标准的 npm install react-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 中导入引导 css：

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

我可以看到您在轮播中有它，但您应该将其导入应用程序。此外，您需要按照文档在其入门部分中所说的那样安装引导程序。

我需要什么才能让轮播在 Stackblitz 上处理我的重现