嗨,我已经使用标准npm install react-bootstrap bootstrap命令安装了bootstrap,并从bootstrap站点实现了carousel代码,但我没有得到carousel。图片正在逐一显示,这是我的代码
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;
答案 0 :(得分:1)
您需要在App.jsx中导入引导CSS:
// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';
我可以看到您的轮播中有它,但是您应该将其导入App中。另外,您需要按照文档在其Getting Started section中的说明安装引导程序。
轮播工作所需的on my repro on Stackblitz