twitter-bootstrap 轮播指示器未显示在幻灯片的白色背景上（自定义样式或类添加）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17872913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Carousel indicators not showing up on white background on slides (custom style or class add)?
提问by genxgeek
How can I restyle my carousel indicators? I have white slides with middle content and the white indicators are not showing up. How can I customize to use a darker color so they show up?
如何重新设计轮播指示器的样式？我有中间内容的白色幻灯片，但没有显示白色指示器。如何自定义使用较深的颜色以便它们显示？
回答by thiagobraga
Overwrite the class .carousel-indicators liin another file, after the Bootstrap CSS bundle. Below I show some snippets for each version of Bootstrap up to the current version (v4).
.carousel-indicators li在 Bootstrap CSS 包之后覆盖另一个文件中的类。下面我展示了 Bootstrap 到当前版本 (v4) 的每个版本的一些片段。
Bootstrap 2.3.2
引导程序 2.3.2
.carousel-indicators li {
background-color: #999;
background-color: rgba(70, 70, 70, 0.25);
}
.carousel-indicators .active {
background-color: #444;
}
Bootstrap 3.4.1 & 4.3.1
引导程序 3.4.1 和 4.3.1
The same rule applies to both versions.
相同的规则适用于两个版本。
/* 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;
}
CodePenfor Bootstrap v3.4.1
CodePenfor Bootstrap v4.3.1
CodePenfor Bootstrap v3.4.1
CodePenfor Bootstrap v4.3.1
回答by Keivan Sabil...
don't forget to point !important after styles :
不要忘记在样式之后点 !important ：
.carousel-indicators li {
background-color: #999 !important;
background-color: rgba(70,70,70,.25) !important;
}
.carousel-indicators .active {
background-color: #444 !important;
}
回答by mmcfly
I agree with @thiagobraga. Override the bootstrap class .carousel-indicators liclass.
我同意@thiagobraga。覆盖引导程序.carousel-indicators li类。
If you want to stay with the bootstrap look and feel, they use a border (with a radius) to make their empty circles. So you can just override the border color:
如果你想保持引导程序的外观和感觉，他们使用边框（带半径）来制作它们的空圆圈。所以你可以覆盖边框颜色：
.carousel-indicators li {
border-color: #777;
}
.carousel-indicators .active {
background-color: #777;
}
