ブートストラップカルーセルが正しく表示されない

Question

私は自分のポートフォリオに取り組んでおり、ブートストラップカルーセル用のコードを貼り付けていますが、正しく表示されません。私は研究してきましたが、これが起こる理由が見つからないようです。他のカルーセルテンプレートも同様に表示されます。これはCSSの問題のようですか？

スクリーンショット：

は、ここでは、コードです：

<!-- About Me ----------------------------------------------------------> 
<section class="bg-primary" id="about"> 
<div class="container"> 
    <div class="row"> 
    <div class="col-lg-8 col-lg-offset-2 text-center aboutMe"> 
     <h2 class="section-heading">About Me</h2> 
     <hr class="light"> 
     <p class="text-faded">I'm a full stack web developer with a passion for HTML and CSS. I love learning new languages and building from the ground up. In my spare time I enjoy being with my family and pets, traveling to Orleans, Cape Cod and avoiding doing laundry. 
     </p> 
    </div> 
    </div> 
</div> 

<!---Carousel --------------------------------------------------------------> 
    <div id="portfolio-Carousel" class="carousel slide" data-ride="carousel"> 
     <ol class="carousel-indicators"> 
     <li data-target="#portfolio-Carousel" data-slide-to="0" class="active"></li> 
     <li data-target="#portfolio-Carousel" data-slide-to="1"></li> 
     <li data-target="#portfolio-Carousel" data-slide-to="2"></li> 
     </ol> 
     <div class="carousel-inner" role="listbox"> 
     <div class="carousel-item active"> 
      <img class="d-block img-fluid" src="..." alt="First slide"> 
     </div> 
     <div class="carousel-item"> 
      <img class="d-block img-fluid" src="..." alt="Second slide"> 
     </div> 
     <div class="carousel-item"> 
      <img class="d-block img-fluid" src="..." alt="Third slide"> 
     </div> 
     </div> 
     <a class="carousel-control-prev" href="#portfolio-Carousel" role="button" data-slide="prev"> 
    <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
</a> 
     <a class="carousel-control-next" href="#portfolio-Carousel" role="button" data-slide="next"> 
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
<span class="sr-only">Next</span> 
     </a> 
</div> 
</section> 

Answer 1

あなたはitemクラスにcarousel-itemクラスを置き換える必要があります。それはあなたのために働くでしょう。

<section class="bg-primary" id="about"> 
<div class="container"> 
    <div class="row"> 
    <div class="col-lg-8 col-lg-offset-2 text-center aboutMe"> 
     <h2 class="section-heading">About Me</h2> 
     <hr class="light"> 
     <p class="text-faded">I'm a full stack web developer with a passion for HTML and CSS. I love learning new languages and building from the ground up. In my spare time I enjoy being with my family and pets, traveling to Orleans, Cape Cod and avoiding doing laundry. 
     </p> 
    </div> 
    </div> 
</div> 

<!---Carousel --------------------------------------------------------------> 
    <div id="portfolio-Carousel" class="carousel slide" data-ride="carousel"> 
     <ol class="carousel-indicators"> 
     <li data-target="#portfolio-Carousel" data-slide-to="0" class="active"></li> 
     <li data-target="#portfolio-Carousel" data-slide-to="1"></li> 
     <li data-target="#portfolio-Carousel" data-slide-to="2"></li> 
     </ol> 
     <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img class="d-block img-fluid" src="..." alt="First slide"> 
     </div> 
     <div class="item"> 
      <img class="d-block img-fluid" src="..." alt="Second slide"> 
     </div> 
     <div class="item"> 
      <img class="d-block img-fluid" src="..." alt="Third slide"> 
     </div> 
     </div> 
     <a class="carousel-control-prev" href="#portfolio-Carousel" role="button" data-slide="prev"> 
    <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
</a> 
     <a class="carousel-control-next" href="#portfolio-Carousel" role="button" data-slide="next"> 
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
<span class="sr-only">Next</span> 
     </a> 
</div> 
</section>