Bootstrap Carousel 在我的反应项目中不起作用。 我已经尝试了一切，但仍然无法正常工作

Question

    {  
       <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>
}
 

我想在 jumbotron 中添加旋转木马。 它编译成功，但没有出现在屏幕上。 它只显示箭头，但不显示内容，请帮忙。

Answer 1

正如反应引导文档中的解释：

轮播不会自动标准化幻灯片尺寸。 因此，您可能需要使用其他实用程序或自定义 styles 来适当调整内容大小。 虽然轮播支持上一个/下一个控件和指示器，但它们并不是明确要求的。 根据需要添加和自定义。

您需要在每个<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>