引导程序轮播在页面上没有显示出来。

Question

我正在尝试添加Bootstrap轮播组件，但是在检查元素时，DOM可用，但未显示。

我正在使用自定义的Bootstrap库，我从此链接下载：

BootStrap自定义链接

我模板中缺少什么？

这是我尝试过的：

HTML：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1" class=""></li>
        <li data-target="#myCarousel" data-slide-to="2" class=""></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

JS:

$('#myCarousel').carousel();

Fiddle Demo

- user4217999

Answer 1

您的代码没有问题，只需要使用下面的css设置图片的高度和宽度，就可以解决问题。

.carousel-inner > .item >img{
  min-height : 300px;
  max-height : 300px;
  width : 100%;
}

- Iqbal Pasha

Answer 2

只需要给 .container 类添加如下高度:

.container{
  height:300px;
}

但是，我更愿意将container类名更改为custom-container。因为bootstrap已经使用container作为类名。所以最好避免预期冲突。

这里是可工作的jsfiddle https://jsfiddle.net/68hf5y33/3/

- Ankush Jain

---

你不能固定容器的高度，因为这会影响到使用相同类的任何地方。 - Iqbal Pasha

Answer 3

由于您正在使用Bootstrap，因此需要在一个滑动的<div>元素中使用类.active才能显示。

- Bingo9

---

目前你的回答不是很清晰。请编辑以添加更多详细信息，帮助他人理解这个问题的解决方法。你可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community