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>