CSS样式未应用于Bootstrap Navbar

我正在尝试更改纳维尔的背景颜色，但它不起作用。这是我的html：

<html>
<head>
    <link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="admin_header.css">
</head>
<body >

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
  <li><a href="#"> <span class="glyphicon glyphicon-home"></span> Home page </a> </li>

  <li><a href="#"> <span class="glyphicon glyphicon-off"></span> Log out</a></li>
    </ul>
  </div>
</nav>
</body>
</html>

这是我的CSS：

.nav.navbar-nav li a{
color: white !important;
}
    .navbar-default {
    background-color: #3232ff !important;
}

之前，我的CSS文件如下所示：

.nav.navbar-nav li a{
color: #3232ff !important;
}

现在，发生了一些奇怪的事情，因为在我使用相同的CSS文件之前，只有anchor link颜色的样式。现在我更改了它，还为navbar的背景颜色添加了样式，它不起作用。颜色保持与之前的更改相同。

使用此代码

.navbar-nav li a {
            color: white ! important;
        }
        .navbar-default {
            background-color: #3232ff !important;
        }

这将解决您的问题。

  .navbar-nav li a {
            color: white !important;
        }
        .navbar-default {
            background-color: #3232ff !important;
        }

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
          href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <ul class="nav navbar-nav">
                <li><a href="#"> <span class="glyphicon glyphicon-home"></span> Home page </a> </li>
                <li><a href="#"> <span class="glyphicon glyphicon-off"></span> Log out</a></li>
            </ul>
        </div>
    </nav>
</body>
</html>

尝试将类添加到您的纳维尔（Navbar），bootstrap正在覆盖您的样式。

例如，您可以在CSS中

.myNavbar.nav.navbar-nav li a {}

编辑：在您正在创建的HTML页面中，例如添加到<ul class="nav navbar"> <ul class = "myNavbar nav navbar-nav" >

编辑：这是一个JSFIDDLE看来您并不真正了解重要的！旗帜https://jsfiddle.net/dtchh/37347/

引用slebetman：

从不
唯一
从不使用！写插件/混搭时很重要。
始终在考虑之前寻找一种使用特异性的方法！重要

相关内容

最新更新

热门标签：