bootstrap 3 navbar品牌颜色

Question

我正在使用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;
}

Answer 1

这是一个特殊性问题.Bootstrap CSS中包含的声明比您的更具体.请用这种方式写下你的声明:

.navbar-default .navbar-brand {
    color: #d6d6d6;
}

简单使用.navbar-brand不太具体,因此被忽略.您可以在这里阅读一些关于特异性的内容.

Answer 2

在bootstrap.css文件中:

.navbar-default .navbar-brand {
  color: #777777;
}

是设置品牌文字颜色的地方.我把color: #ff0000它改成了,它成功地变成了红色.要更改下拉三角形的颜色,请在此处更改颜色值

.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #777777;
  border-bottom-color: #777777;
}

对于下拉三角形的悬停等不同颜色:

.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;
}

Answer 3

如果您的导航栏是黑色的,则使用navbar-inverse,因此这些解决方案无效.

所以在这种情况下使用:

.navbar-inverse .navbar-brand {
    color: #d6d6d6;
}