Question

嗨，我已经使用标准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;

Answer 1

您需要在App.jsx中导入引导CSS：

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

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

轮播工作所需的on my repro on Stackblitz

引导轮播未显示在reactjs中

1 个答案: