15

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

6 回答 6

36

这是一个特异性问题。Bootstrap 的 CSS 中包含的声明比您的更具体。请这样写你的声明：

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

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

于 2013-08-30T13:52:54.067 回答
10

在 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;
}
于 2013-08-30T13:48:14.950 回答
6

If your navbar is black you are using navbar-inverse, so these solutions won't work.

So in this case use:

.navbar-inverse .navbar-brand {
    color: #d6d6d6;
}
于 2016-01-14T05:30:02.097 回答
3

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

于 2013-08-30T14:01:49.853 回答
0 
<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>
于 2020-12-13T10:43:07.667 回答
0

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

！重要的

（在我添加 !important 之前，它们都不适合我）

.navbar-brand {
    color: #ffffff  !important;
}
于 2017-11-18T16:48:48.410 回答