Question

我希望将自举指示器从滑块内的正常位置取出，然后在旋转木马上方放置一个la col-xs-12。以下是我到目前为止的情况。

https://jsfiddle.net/podbarron/v1tk3Ly7/

我考虑过将ol放在div中，但是ol和div仍然具有位置属性。

  <ol id="indicatorOl" class="carousel-indicators col-xs-12">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active col-xs-12"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1" class="col-xs-12"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2" class="col-xs-12"></li>
  </ol>

我还想过把它带到div之外，但是活跃的课程功能不起作用。我想我可以做自己的。你觉得怎么样？

Answer 1

您可以将指示器相对于旋转木马绝对放置。

.carousel {
  position: relative;
}

.carousel-indicators {
  position: absolute;
  bottom: 100%;
}

实例here及以下。

/*For emphasis*/
html {
  background-color:salmon;
}
.carousel {
  margin-top:50px;
  background-color:beige;
}

/*Relevant code*/
.carousel {
  position: relative;
}

#myCarousel .carousel-indicators {
  position: absolute;
  bottom: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    	<!-- 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>   
       <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item carousel-fade">
                <h2>Slide 1</h2>
            </div>
            <div class="item carousel-fade">
                <h2>Slide 2</h2>
            </div>
            <div class="item carousel-fade">
                <h2>Slide 3</h2>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>

以网格形式放置自举指标

1 个答案: