bootstrap carousel指标自定义类添加

时间:2016-03-15 11:19:05

标签: html css twitter-bootstrap

我正在尝试为bootstrap轮播添加自定义类,因为我希望轮播指示器的更改仅反映在应用程序的某一点

这是我的代码

HTML:

<ol class="carousel-indicators custom">
<li data-target="#myCarousel" data-slide-to="0" class="active "></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>

CSS:

.custom .carousel-indicators .active {
    background:green !important;
}
.custom .carousel-indicators li {
    border:2px solid black !important;
}

但我无法看到旋转木马指标的任何变化。 请提供正确的代码

1 个答案:

答案 0 :(得分:1)

删除.custom.carousel-indicators之间的空格。

该空格表示.carousel-indicators.custom后代,实际上它们是相同的元素。

&#13;
&#13;
.custom.carousel-indicators .active {
  background: green !important;
}

.custom.carousel-indicators li {
  border: 2px solid black !important;
}
&#13;
<ol class="carousel-indicators custom">
  <li data-target="#myCarousel" data-slide-to="0" class="active "></li>
  <li data-target="#myCarousel" data-slide-to="1" class=""></li>
  <li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
&#13;
&#13;
&#13;