如何更改导航栏的字体和文本颜色?

时间:2018-12-11 10:55:05

标签: twitter-bootstrap

我尝试了所有操作( Bootstrap4 ),但无法:

.nav.navbar-nav.navbar-right  li a {
    color: green;
}

将无法正常工作。

导航栏列表如下:

 <div class="collapse navbar-collapse navbarSupportedContent">
              <ul class="navbar-nav ml-auto">
                   <li class="nav-item">
                       <a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp;Home</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp;Create</a>
                   </li>
               </ul>
           </div>

也无法更改字体。

2 个答案:

答案 0 :(得分:1)

我想您将上述代码保留在标记中。您可以使用给定的CSS。

nav.navbar-nav>li.nav-item>a {
color: green;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}

答案 1 :(得分:1)

您应该像这样更改代码,我制作了一个工作示例,敬请注意https://www.bootply.com/fOgwVUAbzr

HTML:

<nav class="navbar navbar-expand-lg">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
    <li class="nav-item">
       <a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp;Home</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp;Create</a>
     </li>
    </ul>
  </div>
</nav>

CSS:

.navbar-nav li a {
    color: green;
}