[英]Bootstrap Carousel is not working in my react project. I've tried everything but it's still not working
{
<Jumbotron>
<h3>A safe space to share your thoughts.</h3>
<NewPost/>
<Carousel>
<Carousel.Item>
<Carousel.Caption>
<h3>
"The greatest glory in living lies not in never falling, but in rising every time
we fall."
</h3>
<p>-Nelson Mandela</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<Carousel.Caption>
<h3>
"When you reach the end of your rope, tie a knot in it and hang on."
</h3>
<p>-Franklin D. Roosevelt</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<Carousel.Caption>
<h3>
"In the end, it's not the years in your life that count. It's the life in your
years."
</h3>
<p>-Abraham Lincoln</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</Jumbotron>
}
I want to add carousel in the jumbotron.我想在 jumbotron 中添加旋转木马。 it compiles successfully but doesn't appear on the screen.它编译成功,但没有出现在屏幕上。 it just shows arrows but not the content please help.它只显示箭头,但不显示内容,请帮忙。
As explain in the react bootstrap doc :正如反应引导文档中的解释:
Carousels don't automatically normalize slide dimensions.轮播不会自动标准化幻灯片尺寸。 As such, you may need to use additional utilities or custom styles to appropriately size content.因此,您可能需要使用其他实用程序或自定义 styles 来适当调整内容大小。 While carousels support previous/next controls and indicators, they're not explicitly required.虽然轮播支持上一个/下一个控件和指示器,但它们并不是明确要求的。 Add and customize as you see fit.根据需要添加和自定义。
You need to add a div (for example) before your <Carousel.Caption>
in each <Carousel.Item>
like this:您需要在每个<Carousel.Item>
<Carousel.Caption>
中的 <Carousel.Caption> 之前添加一个 div(例如),如下所示:
<Carousel.Item>
<div className="d-block w-100" style={{ height: "400px" }} />
<Carousel.Caption>
<h3>
"The greatest glory in living lies not in never falling, but in
rising every time we fall."
</h3>
<p>-Nelson Mandela</p>
</Carousel.Caption>
</Carousel.Item>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.