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

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

I want to add carousel in the jumbotron. it compiles successfully but doesn't appear on the screen. it just shows arrows but not the content please help.

Answer 1

正如反应中的解释 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. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.

您需要在每个 <Carousel.Item> 中的 <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>

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

Bootstrap Carousel is not working in my react project. I've tried everything but it's still not working

carousel

reactjs

bootstrap-4