twitter-bootstrap Bootstrap 3 默认轮播：如何将指示器向下移动到幻灯片容器之外？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20207487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 default Carousel: How to move indicators down and outside of slide container?
提问by redshift
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.
将 Bootstrap 3 的轮播指示器向下移动到幻灯片容器外部的简单（干净）方法是什么，使其不会覆盖在照片上？请参阅下图，了解我要将指标移动到的位置。
<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 -->
回答by Zim
回答by Themba Mabaso
you can simply add the bootstrap class hidden after the indicator class like this:
您可以简单地添加隐藏在指标类之后的引导类，如下所示：
<ol class="carousel-indicators hidden">
<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>
回答by Avijit Chakraborty
Customize your item class div
自定义您的项目类 div
<div class="item">
<div class="col-mid-1"> </div>
<div class="col-md-10"> your content </div>
<!-- Note total should not be greater than 12 that is 1 + 10 + 1 = 12-->
<div class="col-mid-1"> </div>
</div>
this worked for me when i don't want the icons on the content div
当我不想要内容 div 上的图标时，这对我有用
回答by Helbert
You can set border to 0pxlike this:
您可以将边框设置为0px这样：
.carousel-indicators li{
border: 0px;
}
回答by Nur Rahmat Taufik Herjanto
You can write with:
你可以写：
.carousel-indicators {
display:none;
}
