更改引导导航栏背景颜色和字体颜色 [英] Change bootstrap navbar background color and font color

问题描述

我想在引导 navbar 中更改背景和文字颜色，但它不会改变预期...这是我的自定义CSS：

I want to change the background and text color in a bootstrap navbar but it's not changing as expected... Here is my custom CSS:

.navbar-default .navbar-fnt {
    color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
    color: #CC3333;
}

和相关的HTML：

<div id="menu" class="navbar navbar-default navbar-fnt navbar-backgrnd">
    <div class="navbar-header">
        <div class="collapse navbar-collapse">
              ul and li
        </div>
    </div>
</div>

我不知道为什么这不会改变背景和文字颜色 - 任何人帮助？

I can't figure out why this won't change the background and text-color - can anyone help?

推荐答案

我已经使用下面的CSS成功地设置了我的引导栏。你也没有在你的CSS中定义任何字体，这就是为什么字体不会改变。您可以在此处找到使用此CSS的网站

I have successfully styled my bootstrap navbar using the following CSS. Also you didn't define any font in your CSS so that's why the font isn't changing. The site for which this CSS is used can be found HERE

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000;  /*Sets the text hover color on navbar*/
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >   
 a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}

  .navbar-default {
    background-color: #0f006f;
    border-color: #030033;
}

  .dropdown-menu > li > a:hover,
   .dropdown-menu > li > a:focus {
    color: #262626;
   text-decoration: none;
  background-color: #66CCFF;  /*change color of links in drop down here*/
   }

 .nav > li > a:hover,
 .nav > li > a:focus {
    text-decoration: none;
    background-color: silver; /*Change rollover cell color here*/
  }


  .navbar-default .navbar-nav > li > a {
   color: white; /*Change active text color here*/
    }

这篇关于更改引导导航栏背景颜色和字体颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！