Question

我的页面中有一个导航栏，如下所示：

＆＃13;

<nav role="navigation" class="nav navbar-default">
  <div class="navbar-header">
    <button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
    </button>
  </div>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
      <li><a href=#>Log In</a></li>
      <li><a href=#>Sign Up</a></li>
    </ul>
  </div>
</nav>

＆＃13;

当我应用这个CSS时：

.collapse ul li {
    color: #ffffff;
}

li是否应该改变颜色？

它仍然是通常的颜色。这是为什么？

Answer 1

您只需要调整选择器

.collapse ul.navbar-nav>li>a {
    color: red;
}

.collapse ul.navbar-nav>li {
    background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav role="navigation" class="nav navbar-default">
            <div class="navbar-header">
                <button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href=#>Log In</a></li>
                    <li><a href=#>Sign Up</a></li>
                </ul>
            </div>
</nav>

Answer 2

bootstrap主题css中有预定义的背景图像属性

background-image: linear-gradient(to bottom,#fff 0,#f8f8f8 100%)

这会阻止您的背景色应用。

所以，将background-image:none;添加到.navbar.navbar-default.

Answer 3

尝试将a标记更改颜色

.collapse ul li a {
    color: #ffffff;
}

Answer 4

只是为了改变颜色。如果你想要一些其他的改变你可以设计它。

＆＃13;

.collapse ul li a {
    color: red;
}

＆＃13;

<nav role="navigation" class="nav navbar-default">
  <div class="navbar-header">
    <button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
    </button>
  </div>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
      <li><a href=#>Log In</a></li>
      <li><a href=#>Sign Up</a></li>
    </ul>
  </div>
</nav>

＆＃13;

如何更改导航颜色？

4 个答案: