旋转木马指示器不显示在幻灯片上的白色背景上（自定义样式或类添加）？

Question

如何重新设置我的旋转木马指示灯？我有中间内容的白色幻灯片，白色指示灯没有出现。如何自定义使用较暗的颜色以便显示？

Answer 1

在Bootstrap CSS包之后覆盖另一个文件中的类.carousel-indicators li。下面我展示了每个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＆amp; 4.3.1

同样的规则也适用于这两个版本。

/* Add an extra .carousel parent class to increase specifity
   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

Answer 2

不要忘记点！样式后重要：

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

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

Answer 3

如果您只想在Bootstrap 4+中将它们变黑。

.carousel-indicators li {
    filter: invert(100%);
}

对Chris Gunawardena的改变箭头颜色技巧的想法表示敬意。

Answer 4

我同意@thiagobraga。覆盖引导类.carousel-indicators li类。

如果你想保持自举的外观和感觉，他们会使用边框（半径）来制作空心圆。所以你可以覆盖边框颜色：

    .carousel-indicators li {
        border-color: #777;
    }

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

Answer 5

Bootstrap 4使用SVG图标。您可以将其颜色反转

.carousel-control-next-icon， .carousel-control-prev-icon { 过滤器：invert（1）; }