我一直在试图改变引导轮盘指示器和控件的位置。在这个网站上看起来像个旋转木马。http://www.mitre10.co.nz/指示灯和控制灯位于底部,远离图像。
这是我的现场视图http://codepen.io/riwakawebsitedesigns/pen/qdiup
<header id="masterhead">
<div class="container">
<div class="slideshow">
<div id="slideshow" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slideshow" data-slide-to="0" class="active"></li>
<li data-target="#slideshow" data-slide-to="1"></li>
<li data-target="#slideshow" data-slide-to="2"></li>
<li data-target="#slideshow" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://s20.postimg.org/wgz1zd3wd/slide1.jpg" alt="slide"/>
</div>
<div class="item">
<img src="http://s20.postimg.org/l3cio5tdp/slide2.jpg" alt="slide"/>
</div>
<div class="item">
<img src="http://s20.postimg.org/w0ducxg59/slide3.jpg" alt="slide"/>
</div>
<div class="item">
<img src="http://s20.postimg.org/lrld73s3h/slide4.jpg" alt="slide"/>
</div>
</div>
<a class="left carousel-control" href="#slideshow" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slideshow" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</header>
最佳答案
我无法打开您的示例站点,但您可以将这些指示器移出当前位置并将其放置在您希望的位置。我将它们从你的代码笔的标题中移出,将它们包装在一个容器中,并添加了一些样式以将它们移动到图片下方并居中:
<div class="carousel-controls">
<a class="left carousel-control" href="#slideshow" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<ol class="carousel-indicators">
<li data-target="#slideshow" data-slide-to="0" class="active"></li>
<li data-target="#slideshow" data-slide-to="1"></li>
<li data-target="#slideshow" data-slide-to="2"></li>
<li data-target="#slideshow" data-slide-to="3"></li>
</ol>
<a class="right carousel-control" href="#slideshow" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
CSS:
.carousel-controls{
position:relative;
width:300px;
margin:0 auto;
}
.carousel-indicators{
top:0px;
}
参考文献:http://codepen.io/anon/pen/tayfk/