CSS twitter bootstrap 自定义轮播指标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15844157/
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
twitter bootstrap custom carousel indicators
提问by agis
I want to change the carousel indicators with something like this:
我想用这样的东西来改变轮播指标：
I have this markup for my carousel indicators:
我的轮播指示器有这个标记：
<ol class="carousel-indicators">
<li data-target="#ShowCarousel-03" data-slide-to="0" class="active">
<h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span>
</li>
<li data-target="#ShowCarousel-03" data-slide-to="0" class="active">
<h4>IMAGE2</h4><br/><h5>subtitle</h5><br/><span>+</span>
</li>
<li data-target="#ShowCarousel-03" data-slide-to="2">
<h4>IMAGE3</h4><br/><h5>subtitle</h5><br/><span>+</span>
</li>
<li data-target="#ShowCarousel-03" data-slide-to="0" class="active">
<h4>IMAGE4</h4><br/><h5>subtitle</h5><br/><span>+</span>
</li>
</ol>
CSS:
CSS：
.carousel-indicators {
position: absolute;
top: 0px;
left: 0px;
z-index: 5;
margin: 0;
list-style: none;
}
.carousel-indicators li{
background: url(images/triangle.png) no-repeat;
width:320px;
height:176px;
cursor: pointer;
text-align:center;
}
When I resize my browser the carousel adapts to the width of the screen but the indicators are collapsing.
当我调整浏览器的大小时，轮播会适应屏幕的宽度，但指示器正在折叠。
Can someone help me with a tip on how can I make this scale also on lower resolutions like the carousel images does?
有人可以帮助我提示如何在较低分辨率下（如轮播图像）制作此比例尺？
Thank you!
谢谢！
L.E:
乐：
I've tried to put li elements like this:
我试过像这样放置 li 元素：
<div class="row-fluid">
<div class="span3>
<li data-target="#ShowCarousel-03" data-slide-to="0" class="active">
<h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span>
</li>
<div class="span3>
<li data-target="#ShowCarousel-03" data-slide-to="0" class="active">
<h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span>
</li>
<div class="span3>
<li data-target="#ShowCarousel-03" data-slide-to="0" class="active">
<h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span>
</li>
</div>
</div>
But it's not working.
但它不起作用。
采纳答案by Kevin Lynch
You could use media query -
您可以使用媒体查询 -
@media screen and (max-width:480px) {
.carousel-indicators li{
background: url(images/triangle.png) no-repeat;
background-size:120px 60px;
width:120px;
height:60px;
cursor: pointer;
text-align:center;
}
回答by agis
It's collapsing because the width of your carousel-indicator is 320px. You can't have fixed with if you also want your code to be responsive on mobile. You can substitute percentage rather than using a fixed width
它正在崩溃，因为您的轮播指示器的宽度是 320 像素。如果您还希望您的代码在移动设备上具有响应性，那么您无法修复。您可以替换百分比而不是使用固定宽度
.carousel-indicators li{
background: url(images/triangle.png) no-repeat;
max-width:25%;
max-height:15%; /*or any other percentage that would look good*/
cursor: pointer;
text-align:center;
}
Note that I used max-height and max-height so that I could keep the proportion of the image so it doesn't get stretched out in either direction.
请注意，我使用了 max-height 和 max-height 以便我可以保持图像的比例，这样它就不会在任一方向上被拉伸。
