将引导指示器置于网格形式

Put bootstrap indicators in grid form

本文关键字：网格 于网格 指示器      更新时间：2023-09-26

我希望将引导指示器从滑块内的正常位置移开，并放在旋转木马上方，就像 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 之外，但随后活动类功能不起作用。我想我可以自己做。你觉得怎么样？

您可以绝对相对于轮播放置指标。

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

这里和下面的现场示例。

/*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>

相关文章：