Question

我在这里有一个导航栏，如何更改颜色和字体颜色？

我尝试更改编辑li的属性，然后更改ul，以及此代码中的每个元素，我都被卡住了。

<nav class="navbar navbar-inverse navbar-fixed-top color navigation" role="navigation">
    <div class="container navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header navigation">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand navigation" href="#">Start Bootstrap</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navigation" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navigation">
                <li class="navigation">
                    <a href="#" class="navigation">About</a>
                </li>

                <li>
                    <a href="#">Creators</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

Answer 1

将课程添加到您的CSS

.navbar-header.navigation{
    background: your colour here;
}

或

使用内联样式

<nav class="navbar navbar-inverse navbar-fixed-top color navigation" role="navigation" style="background: your color;">

我不会推荐第二种方法，因为它较慢而且一般来说不是一种好的做法，但仍然会这样做。至于第一个，您可以摆脱navbar-inverse或类，或者使用它作为css选择器来覆盖引导程序

＆＃13;

.navbar.navbar.navigation.color {
  background: red;
}

＆＃13;

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top color navigation" role="navigation">
    <div class="container navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header navigation">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand navigation" href="#">Start Bootstrap</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navigation" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navigation">
                <li class="navigation">
                    <a href="#" class="navigation">About</a>
                </li>

                <li>
                    <a href="#">Creators</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

＆＃13;

使用你的颜色类我在第一点没有注意到

Answer 2

bootstrap类navbar-inverse默认css是background-color：＃222; border-color：＃080808; 并且对于链接文本颜色默认情况下css是.navbar-inverse .navbar-nav＆gt; li> a {color：rgb（157,157,157）;}

因此，如果您想要更改导航栏的背景颜色和链接（表示标记或锚文本），您可以尝试这样的操作。 LiveOnFiddle

   .navbar-inverse{
      background-color:red;
      border-bottom-color:red;
    }
.navbar-inverse .navbar-nav>li>a {
   color: white;
}

如何更改此导航栏的颜色和背景？

2 个答案: