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

如何解决Bootstrap Carousel 在我的 React 项目中不起作用我已经尝试了一切，但仍然无法正常工作

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

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

解决方法

如 react bootstrap doc 中所述：

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

您需要在每个 <Carousel.Caption> 中的 <Carousel.Item> 之前添加一个 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>