Twitter Bootstrap 自定义轮播指示器

Question

我希望用类似于这样的内容来更改轮播指示器：

我有以下标记用于我的轮播指示器：

<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：

    .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;
}

当我调整浏览器大小时，轮播适应屏幕宽度，但指示器却崩溃了。有人可以给我提供一个提示吗？如何使这个在低分辨率下也像轮播图片一样缩放？

谢谢！

附注：

我已经尝试过将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>

但它没有起作用。

- agis

Answer 1

轮播指示器的宽度为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;
}

请注意，我使用了max-height和max-height属性，以便保持图像的比例，使其在任何方向上都不会被拉伸。

- user2163433

---

这段代码对我来说很有效！最后我需要在max-height和max-width中添加!important才能使其正常工作。我还从这篇文章中发现，可以为活动指示器添加自定义图像：.carousel-indicators li.active{ background: url(../images/imagename.png) no-repeat !important; - Bhetzie

Answer 2

你可以使用媒体查询 -

@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;
    }

- Kevin Lynch

---

我认为这不是我要找的，因为这样我必须为每个屏幕尺寸准备不同的图像，应该有另一种方法。 - agis

使用与上述相同的图像，只需使用CSS调整大小即可。可能还有其他选项，但我建议使用媒体查询。 - Kevin Lynch

这是正确的，但是这样我仍然需要检查每个分辨率并查看在该特定分辨率下应使用什么大小的图像。感谢您的建议！ - agis