React boostrap旋转木马不起作用

时间:2018-05-14 20:54:43

标签: javascript reactjs react-bootstrap

我正在尝试使用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

图像垂直堆叠,不会发生转换。我在这里做错了什么。

4 个答案:

答案 0 :(得分:2)

您是否关联了样式文件?

根据docs

  

因为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">

答案 1 :(得分:0)

我也有完全相同的问题。在async def on_server_role_update(before, after): list_a = [] list_b = [] list_a.append(str([p[0] for p in before.permissions])) list_b.append(str([p[0] for p in after.permissions])) dif_add = set(list_b).difference(list_a) dif_rem = set(list_a).difference(list_b) print("Added Permissons: " + ", ".join(dif_add)) print("Removed Permissons: " + ", ".join(dif_rem)) 文件中,而不是链接到

public/index.html

我将其更改为

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

有效:)

答案 2 :(得分:0)

这就是我所做的。很好。

在index.js中添加以下行

import "../../node_modules/bootstrap/dist/css/bootstrap.css"

答案 3 :(得分:0)

npm install popper.js --save

并在 index.js 中包含它,例如...

import 'popper.js'