html – 如何更改bootstrap轮播指示器和控件

概述我试图能够改变bootstrap轮播指示器和控件的位置.在这个网站上看起来像这个旋转木马. http://www.mitre10.co.nz/指标和控件是否位于底部且远离图像. 这是我的实时视图http://codepen.io/riwakawebsitedesigns/pen/qdiup <header id="masterhead"><div class="container"> <di 我试图能够改变bootstrap轮播指示器和控件的位置.在这个网站上看起来像这个旋转木马. http://www.mitre10.co.nz/指标和控件是否位于底部且远离图像.

这是我的实时视图http://codepen.io/riwakawebsitedesigns/pen/qdiup

<header ID="masterhead"><div >  <div ><div ID="slIDeshow"  data-rIDe="carousel">          <ol >               <li data-target="#slIDeshow" data-slIDe-to="0" ></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 >            <div >          <img src="http://s20.postimg.org/wgz1zd3wd/slIDe1.jpg" alt="slIDe"/>            </div>            <div >          <img src="http://s20.postimg.org/l3cio5tdp/slIDe2.jpg" alt="slIDe"/>            </div>            <div >            <img src="http://s20.postimg.org/w0ducxg59/slIDe3.jpg" alt="slIDe"/>            </div>            <div >            <img src="http://s20.postimg.org/lrld73s3h/slIDe4.jpg" alt="slIDe"/>            </div>        </div>        <a  href="#slIDeshow" data-slIDe="prev">            <span ></span>        </a>        <a  href="#slIDeshow" data-slIDe="next">            <span ></span>        </a></div></div> </div></div></div></header>

解决方法 我无法打开您的示例网站,但您可以将这些指标移出当前位置并将其放置在您希望的位置.我将它们从CodePen的标题中移出,将它们包装在一个容器中,并添加了一些样式以将它们移动到图像下方并将它们居中：

<div >    <a  href="#slIDeshow" data-slIDe="prev">        <span ></span>    </a>    <ol >           <li data-target="#slIDeshow" data-slIDe-to="0" ></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  href="#slIDeshow" data-slIDe="next">        <span ></span>    </a></div>

CSS：

.carousel-controls{ position:relative;   wIDth:300px;  margin:0 auto;}.carousel-indicators{   top:0px; }

ref：http://codepen.io/anon/pen/tayfk/

总结

以上是内存溢出为你收集整理的html – 如何更改bootstrap轮播指示器和控件全部内容，希望文章能够帮你解决html – 如何更改bootstrap轮播指示器和控件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。