React boostrap 轮播不工作

Question

我正在尝试使用react-bootstrap 创建一个简单的轮播。这是我试图创建的简单的不受控制的轮播。 https://react-bootstrap.github.io/components/carousel/

这是我的代码，

import React from 'react';
import Carousel1 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-01.png';
import Carousel2 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-02.png';
import Carousel3 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-03.png';
import Carousel4 from 
import Carousel from 'react-bootstrap/lib/Carousel';


    const Core = () => (
        <main className="core">
            <article className="left">
                <Carousel>
                    <Carousel.Item>
                        <img src={Carousel1} alt=""/>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img src={Carousel2} alt=""/>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img src={Carousel3} alt=""/>
                    </Carousel.Item>
                </Carousel>

            </article>
            <article className="right"></article>
        </main>

    );
    export default Core

图像垂直堆叠并且不会发生任何过渡。我在这里做错了什么。

Answer 1

我也遇到了完全相同的问题。在public/index.html文件中，而不是链接到

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

我把它改为

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

有效 ：）

Answer 2

您链接了样式文件吗？

根据文档：

因为 React-Bootstrap 不依赖于非常精确的 Bootstrap 版本，所以我们不附带任何包含的 css。然而，使用这些组件需要一些样式表。如何以及包含哪些引导样式由您决定，但最简单的方法是包含来自 CDN 的最新样式。

对于链接，将以下内容添加到index.html：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">