html – 样式引导旋转木马指示器

概述您好我正在尝试将默认的bootstrap轮播指示器设置为非常薄的黄色线条粘在底部,如下所示. https://gyazo.com/43b9bdbcb63dde3f5fe9b982d4b96b37 我把它们放在页面的底部,但我似乎无法将它们变成矩形或改变它们的颜色. HTML <ol class="carousel-indicators"> <li data-target=" 您好我正在尝试将默认的bootstrap轮播指示器设置为非常薄的黄色线条粘在底部,如下所示.

https://gyazo.com/43b9bdbcb63dde3f5fe9b982d4b96b37

我把它们放在页面的底部,但我似乎无法将它们变成矩形或改变它们的颜色.

HTML

<ol >            <li data-target="#myCarousel" data-slIDe-to="0" ></li>            <li data-target="#myCarousel" data-slIDe-to="1"></li>            <li data-target="#myCarousel" data-slIDe-to="2"></li>            <li data-target="#myCarousel" data-slIDe-to="3"></li>        </ol>

CSS

.carousel-indicators {    margin: 0px;    height: 0px;}    .carousel-indicators ol {        wIDth: 100%;    }    .carousel-indicators li{        height: 3px !important;        border-radius: 0px !important;        wIDth: 25%;    }

解决方法 像这样的东西？请注意,宽度并不完全准确,因为我只做了33％.

.item img {  wIDth: 100%;  height: auto}.carousel {  position: relative;  wIDth: 200px;  height: 100px;}ol.carousel-indicators {  position: absolute;  bottom: 0;  margin: 0;  left: 0;  right: 0;  wIDth: auto;}ol.carousel-indicators li,ol.carousel-indicators li.active {  float: left;  wIDth: 33%;  height: 10px;  margin: 0;  border-radius: 0;  border: 0;  background: transparent;}ol.carousel-indicators li.active {  background: yellow;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS" rel="stylesheet" /><div ID="carousel"  data-rIDe="carousel">  <ol >    <li data-target="#carousel" data-slIDe-to="0" ></li>    <li data-target="#carousel" data-slIDe-to="1"></li>    <li data-target="#carousel" data-slIDe-to="2"></li>  </ol>  <div  role="ListBox">    <div >      <img src="http://placehold.it/200x100" alt="SlIDe 1">      <div >        SlIDe 1      </div>    </div>    <div >      <img src="http://placehold.it/200x100" alt="SlIDe 2">      <div >        SlIDe 2      </div>    </div>    <div >      <img src="http://placehold.it/200x100" alt="SlIDe 3">      <div >        SlIDe 3      </div>    </div>  </div>  <a  href="#carousel" role="button" data-slIDe="prev">    <span  aria-hIDden="true"></span>    <span >PrevIoUs</span>  </a>  <a  href="#carousel" role="button" data-slIDe="next">    <span  aria-hIDden="true"></span>    <span >Next</span>  </a></div><script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.9.1/jquery.min.Js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/Js/bootstrap.min.Js"></script>

总结

以上是内存溢出为你收集整理的html – 样式引导旋转木马指示器全部内容，希望文章能够帮你解决html – 样式引导旋转木马指示器所遇到的程序开发问题。

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