Question

所以我有自举导航栏，它是固定的，有身体填充顶部：50px; 到目前为止这么好，但bootstrap.js和.css文件使点击的li背景颜色为白色，我希望它是黑色我想是默认是白色。所以我试图手动更改.active类的背景颜色属性

HTML：

<header>
<nav class="navbar navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>
        <a class="navbar-brand" href="#"><img id="logo-img" src="images/logo.png" alt="logo"></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-search"></span> Search</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-home"></span> Sales</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="fa fa-cogs"></span> Services</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-comment"></span> Contact</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-link"></span> About Us</a></li>
        </ul>
        </div>
    </div>
</nav>
</header>

在自定义CSS我有但没有任何反应它不会从白色变为黑色：

.active {
    background-color: black !important;
}

Answer 1

只更改.active课程的背景无效

尝试以下方法：

ul.nav a:hover, ul.nav a:focus, ul.nav a:active { color: #000; }

我不认为!important是必要的

bootstrap navbar手动更改活动li背景颜色

1 个答案: