Bootstrap 3默认轮播：如何将指示器向下移动到幻灯片容器的外部？ [英] Bootstrap 3 default Carousel: How to move indicators down and outside of slide container?

问题描述

有什么简单（干净）的方法可以将Bootstrap 3的轮播指示器向下和向下移动到幻灯片容器之外，从而使其不覆盖在照片上？

What's an easy (and clean) way to move Bootstrap 3's carousel indicators down and outside of the slide container so it's not overlayed on the photos? See image below on where I want to move the indicators.

Link to live code

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

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placehold.it/1170x300.jpg" alt="...">
            </div>

            <div class="item">
                <img src="http://placehold.it/1170x300.jpg" alt="...">
            </div>

            <div class="item">
                <img src="http://placehold.it/1170x300.jpg" alt="...">
            </div>

        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

</div><!--//container -->

解决方案

You can push them below the slider like this...

.carousel-indicators {
  bottom:-50px;
}

Leave space below the carousel so that the pushed indicators don't interfere with content below the slider..

.carousel-inner {
   margin-bottom:50px;
}

Demo

这篇关于Bootstrap 3默认轮播：如何将指示器向下移动到幻灯片容器的外部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！