Bootstrap Carousel 显示不正确

debugcn 发表于 Dev

苏珊

我正在处理我的投资组合并粘贴了 Bootstrap 轮播的代码，但它没有正确显示。我一直在研究，但似乎找不到发生这种情况的原因。其他轮播模板也以类似方式显示。这看起来像 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>

天阮玉

您必须将carousel-item班级替换为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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。