twitter-bootstrap - 轮播指示器未显示在幻灯片的白色背景上(自定义样式或类添加)？

Question

如何重新设计我的轮播指示器？我有中间内容的白色幻灯片，白色指示器没有显示。如何自定义以使用较暗的颜色以使它们显示出来？

Answer 1

覆盖类.carousel-indicators li在另一个文件中，在 Bootstrap CSS 包之后。下面我展示了每个版本的 Bootstrap 的一些片段，直到当前版本 (v4)。

Bootstrap 2.3.2

.carousel-indicators li {
  background-color: #999;
  background-color: rgba(70, 70, 70, 0.25);
}

.carousel-indicators .active {
  background-color: #444;
}

CodePen for Bootstrap v2.3.2

Bootstrap 3.4.1 和 4.3.1
相同的规则适用于两个版本。

/* Add an extra .carousel parent class to increase specificity
   avoiding the use of !important flag. */
.carousel .carousel-indicators li {
  background-color: #fff;
  background-color: rgba(70, 70, 70, 0.25);
}

.carousel .carousel-indicators .active {
  background-color: #444;
}

CodePen for Bootstrap v3.4.1
CodePen for Bootstrap v4.3.1