Question

请你看一下this demo并告诉我如何设置引导转盘的控件，当我必须将z-index设置为-1时？

#test{z-index:-1;}
.box1{height:500px; background-color:red;}
.box2{height:500px; background-color:blue;}

<section class="navbar-fixed-top" id="test">
<div class="row">
  <div class="container">
  <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>

  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-2-full.jpg" 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" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

  </div>
  </div>
  </section>
<section>
<div class="row">
  <div class="container">
  <div class="box1"></div>
  </div>
  </div>
  </section>
<section>
<div class="row">
  <div class="container">
  <div class="box2"></div>
  </div>
  </div>
  </section>

Answer 1

section#test设置为position: fixed，这不仅意味着它保持在同一位置，而且还意味着它不会占用任何空间。这就是为什么下一个section与section#test处于同一位置的原因。现在，由于您将section#test设置为z-index: -1，因此另一个section位于section#test之前。因此，您无法点击控件。

解决方案是从position: fixed中删除section#test。在您的情况下，最好的办法是从navbar-fixed-top中删除课程section#test。此外，您应该禁用您的脚本，因此这些部分彼此相邻。

http://www.bootply.com/rAx64sK7wd

Bootstrap Carousel控件不单击Able On将z-index设置为-1

1 个答案: