造型引导转盘指标 [英] Styling bootstrap carousel indicators
本文介绍了造型引导转盘指标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
你好,我试图让默认的引导程序轮播指标变得非常细的黄线,如下图所示。
Hello I'm trying to get the default bootstrap carousel indicators to be very thin yellow lines stuck att he bottom as shown below.
https://gyazo.com/43b9bdbcb63dde3f5fe9b982d4b96b37
我让他们在页面底部,但我似乎无法将它们更改为矩形或更改它们的颜色。
I got them to be at the bottom of the page but I can't seem to change them into rectangles or change their color.
HTML
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></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%。
Something like this? Note that the width is not totally accurate because I just made it 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" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/200x100" alt="Slide 1">
<div class="carousel-caption">
Slide 1
</div>
</div>
<div class="item">
<img src="http://placehold.it/200x100" alt="Slide 2">
<div class="carousel-caption">
Slide 2
</div>
</div>
<div class="item">
<img src="http://placehold.it/200x100" alt="Slide 3">
<div class="carousel-caption">
Slide 3
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">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>
这篇关于造型引导转盘指标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文