我正在尝试使用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
图像垂直堆叠,不会发生转换。我在这里做错了什么。
答案 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)
这就是我所做的。很好。
import "../../node_modules/bootstrap/dist/css/bootstrap.css"
答案 3 :(得分:0)
npm install popper.js --save
并在 index.js 中包含它,例如...
import 'popper.js'