Html Bootstrap 轮播内容在箭头之间不显示

我在try 将 carousel 元素添加到我的项目中时遇到了这个问题.我的代码的结果是一个工作的 carousel ；箭头工作得很好，如果我添加一个自动播放选项，它也可以工作.然而，内容本身并不在箭头之间.

首先，我在通过NPM下载的bootstrap的标题部分中包含了以下几行代码:

    <link rel="stylesheet" href="./src/main.css">
    <script src="./node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

然后，我为 carousel 添加了与 bootstrap 程序文档中的元素完全相同的元素:

            <div id="projectsCarousel" class="carousel slide carousel-fade carousel-dark">
                <div class="carousel-inner">
                    <div class="carousel-item active"><h3>hello</h3></div>
                    <div class="carousel-item">2</div>
                    <div class="carousel-item">3</div>
                    <div class="carousel-item">4</div>
                    <div class="carousel-item">5</div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#projectsCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#projectsCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>

如前所述，内容本身不在箭头之间.

如果有人能帮我弄清楚为什么会发生这种事，我会非常感谢他们的！

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div id="projectsCarousel" class="carousel slide carousel-fade carousel-dark">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <h3>hello</h3>
    </div>
    
    <div class="carousel-item">2</div>
    <div class="carousel-item">3</div>
    <div class="carousel-item">4</div>
    <div class="carousel-item">5</div>
  </div>
  
  <button class="carousel-control-prev" type="button" data-bs-target="#projectsCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon"></span>
  </button>
  
  <button class="carousel-control-next" type="button" data-bs-target="#projectsCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon"></span>
  </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>