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不那么具体，因而被忽略了。您可以阅读一些关于特异性的here。

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

Answer 4

如果你的风格没有生效，那么这是一个特殊问题。在Chrome或Safari中使用Web Inspector，它会告诉您哪些样式有效，以及用于应用这些样式的选择器。

Answer 5

如果此处的其他建议不起作用，请添加

！重要

（在我加入之前，他们都没有为我工作！重要）

.navbar-brand {
    color: #ffffff  !important;
}

Answer 6

<style> 
    /* Modify the background color */ 
      
    .navbar-custom { 
        background-color: lightgreen; 
    } 
    /* Modify brand and text color */ 
      
    .navbar-custom .navbar-brand, 
    .navbar-custom .navbar-text { 
        color: green; 
    } 
</style>

bootstrap 3 navbar品牌颜色

6 个答案: