Question

我正在制作旋转木马并将其插入col-md-8，其余4个网格用于侧面导航。当我从幻灯片的包装类中删除活动类时，我的轮播不可见为什么会发生这种情况为什么我们需要让它活动。

<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"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
  </a>
</div>

如果我将class="item active"更改为class="item"，那么我的轮播将无法看到为何会发生这种情况。

Answer 1

因为这表示旋转木马组件首先看到哪个滑块。阅读Bootstrap docs ..

需要初始有效元素
.active类需要添加到其中一个幻灯片中。否则，轮播将不可见。

Answer 2

活动状态表示从您的轮播中的图像列表中显示一个元素，这意味着如果您在任何项目上没有活动状态将不会显示任何幻灯片，从而导致不显示所有轮播，因为旋转木马的高度由活动标签的高度决定。

移除活动状态时轮播不可见？

2 个答案: