CSS Bootstrap 3 导航栏品牌颜色
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18534390/
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
bootstrap 3 navbar branding colour
提问by user1949366
I am using the bootstrap 3 navbar but cant for some reason change the brand text colour nor the dropdown triangles. i've tried a couple of things, but still no luck...
我正在使用 bootstrap 3 导航栏,但由于某种原因无法更改品牌文本颜色和下拉三角形。我已经尝试了几件事,但仍然没有运气......
.navbar .nav > .navbar-brand > a {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #d6d6d6;
}
.navbar-brand {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #d6d6d6;
}
.navbar-brand a{
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #d6d6d6;
}
回答by mingos
This is a specificity issue. The declaration contained in Bootstrap's CSS is more specific than yours. Please write your declaration this way:
这是一个特殊性问题。Bootstrap 的 CSS 中包含的声明比您的更具体。请这样写你的声明:
.navbar-default .navbar-brand {
color: #d6d6d6;
}
Simply using .navbar-brand
is less specific and thus ignored. You may read a little bit about specificity here.
回答by Gloria
In the bootstrap.css file:
在 bootstrap.css 文件中:
.navbar-default .navbar-brand {
color: #777777;
}
is where the Brand text color is set. I changed that to color: #ff0000
and it successfully changed to red.
To change the color of the dropdown triangle,change values of color here
是设置品牌文本颜色的地方。我将其更改为color: #ff0000
并成功更改为红色。要更改下拉三角形的颜色,请在此处更改颜色值
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777777;
border-bottom-color: #777777;
}
For different colors on hover etc for the dropdown triangles:
对于悬停等不同颜色的下拉三角形:
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #ff0000;
border-bottom-color: #ff0000;
}
回答by Zacarias Bendeck
If your navbar is blackyou are using navbar-inverse, so these solutions won't work.
如果您的导航栏是黑色的,则您使用的是navbar-inverse,因此这些解决方案将不起作用。
So in this case use:
所以在这种情况下使用:
.navbar-inverse .navbar-brand {
color: #d6d6d6;
}
回答by Martin Bean
If your styles aren't taking effect then it's a specificity issue. Use the Web Inspector in Chrome or Safari and it will tell you what styles are in effect, and also the selector used to apply those styles.
如果您的样式没有生效,那么这是一个特殊性问题。在 Chrome 或 Safari 中使用 Web Inspector,它会告诉您哪些样式有效,以及用于应用这些样式的选择器。
回答by Ula
If other suggestions here do not work for you just add
如果这里的其他建议对您不起作用,请添加
!important
!重要的
( None of them worked for me till I added !important )
(在我添加 !important 之前,他们都没有为我工作)
.navbar-brand {
color: #ffffff !important;
}