轮播图片在不应该的时候堆叠 Bootstrap 3.3.7

Question

我想创建一个包含两张幻灯片、每张幻灯片的标题以及用于向前和向后滑动的控件的轮播。

有谁知道为什么图片会堆叠？？？

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>

  <div class="carousel slide" data-ride="carousel" data-interval=”false”>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block img-fluid" src="https://d2z0k43lzfi12d.cloudfront.net/blog/vcdn215/wp-content/uploads/2017/06/15.06._Running-Stamina-1-800x510.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block img-fluid" src="https://www.shape.com/sites/shape.com/files/1200-woman-running-outside_1.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block img-fluid" src="/Virginian_banner.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" 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" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 1

为了能够利用 Bootstrap 的组件，您需要尊重他们在文档中提供的 classes，或者通过 JS 使用组件以便您可以配置它们你自己。

在这种情况下，您更改了 class：您使用了 carousel-item 而不是 item，这使它无法工作。我在下面的示例中将 data-interval 更改为 600，以便您可以看到它正在运行。

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>

  <div class="carousel slide" data-ride="carousel" data-interval="600">
    <div class="carousel-inner">
      <div class="item active">
        <img class="d-block img-fluid" src="https://d2z0k43lzfi12d.cloudfront.net/blog/vcdn215/wp-content/uploads/2017/06/15.06._Running-Stamina-1-800x510.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="item">
        <img class="d-block img-fluid" src="https://www.shape.com/sites/shape.com/files/1200-woman-running-outside_1.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="item">
        <img class="d-block img-fluid" src="/Virginian_banner.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" 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" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"  crossorigin="anonymous"></script>

轮播图片在不应该的时候堆叠 Bootstrap 3.3.7

Carousel images are stacking when they're not suppose to Bootstrap 3.3.7

twitter-bootstrap-3

bootstrap-carousel