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

Question

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

Answer 1

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

引导程序 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

---

引导程序 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

Answer 2

不要忘记在样式之后指出 !important ：

.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 { 过滤器：反转（1）；}