Question

我在一个页面中有多个轮播。我需要将指标移出主旋转木马div。一切正常，但当我点击指示灯时，它没有激活。

 <!-- 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>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">    
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <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>
</div>

Answer 1

它会起作用

 <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" role="listbox">
    <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>
</div>

Answer 2

您可以将指标放在任何div中，然后使用CSS属性移动它，例如：

.indicators {
    position: relative;
    top: 0;
    left: 0;
}

Bootstrap - 如何将指标移出主div

2 个答案: