Bootstrap旋转木马消失了

Question

引导转盘在第二张幻灯片后消失，然后再次出现。它需要一个容器吗？还是图书馆之间存在冲突？

<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://www.sagu.edu/templates/sagu-redux/img/showcase-3.jpg" alt="">
      <div class="container">
        <div class="carousel-caption">
          <h1>Example headline.</h1>
          <p class="lead">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>
          <a class="btn btn-large btn-primary" href="#">Sign up today</a>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="http://www.sagu.edu/templates/sagu-redux/img/showcase-2.jpg" alt="">
      <div class="container">
        <div class="carousel-caption">
          <h1>Another example headline.</h1>
          <p class="lead">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>
          <a class="btn btn-large btn-primary" href="#">Learn more</a>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="http://www.sagu.edu/templates/sagu-redux/img/showcase-5.jpg" alt="">
      <div class="container">
        <div class="carousel-caption">
          <h1>One more for good measure.</h1>
          <p class="lead">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>
          <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>

Answer 1

从每个项目中删除<div class="container">和相应的结束</div>，包括从活动项目中删除。不需要这种额外的语法。请参阅Twitter Bootstrap Documentation-v3:中提供的语法示例

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

如果您仍然看到问题，请尝试重构语法以匹配文档。例如，它包括一个carosel指示符oldiv，用于定义转盘中的图像。

这是jsfiddle显示您的转盘工作正常。在fiddle中，我还调用了transition.js，并注意到carousel.js的版本是3.2（而不是你可能正在使用的2.3.2）。同样值得检查的是，您使用的是最新的bootstrap.min.css文件。对于fiddle，我使用的是来自Twitter bootstrap CDN的jQuery 1.11.0、bootstrap.min.css、transition.js和carousel.js。你可以从这把小提琴上看到如何使左右箭头看起来更像你所描述的你想要的。

Answer 2

我注意到你在第一个div中忘记了data-ride="carousel"。我不知道这是否有帮助，但值得一试。Bootstrap的示例供参考。