【问题标题】：Not able to change bootstrap's css无法更改引导 css
【发布时间】：2017-03-18 17:27:05
【问题描述】：
我遇到了一个问题，即我无法更改引导程序的 css 上的内容。我试过直接编辑引导程序并创建另一个css进行覆盖，但两者都没有成功。例如，我想更改导航栏的背景颜色，但它不起作用（奇怪的是，它适用于移动设备），它仍然保持引导程序的默认颜色，即黑色。
我将在下面放一段我的代码。
这是我为覆盖而创建的 CSS
.navbar-inverse{
background:#f46e42 !important;
color:blue;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Página de operações">
<title> Operar </title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/meucss.css">
</head>
<body>
<header class="navbar navbar-inverse navbar-static-top" id="nav" style="margin-bottom: 0px;">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="javascript:history.back()"> Previous Page </a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"> Home </a></li>
<li class="#"><a href="#"> About </a></li>
<li> <a class="dropdown-toggle" href="#" data-toggle="dropdown"> Learn <b class="caret"> </b></a>
<ul class="dropdown-menu">
<li class="dropdown-header"> Examples </li>
<li><a href="#"> C++ </a></li>
<li><a href="#"> Java </a></li>
<li class="dropdown-header"> Tutorials </li>
<li><a href="#"> JavaScript</a></li>
<li><a href="#"> Cobol </a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
【问题讨论】：
标签：
jquery
html
css
twitter-bootstrap
navbar
【解决方案1】：
我更新了 bootstrap 的 css CDN 的链接，并将导航元素从“header”更改为“nav”，每个 bootstrap 文档在此处找到：[http://getbootstrap.com/components/#navbar][1]
看起来好像 Bootstrap 原生使用“nav”元素作为导航的容器。我在台式机和平板电脑分辨率下对此进行了测试，并且效果很好。我希望这会有所帮助。
.navbar-inverse {
background:#f46e42 !important;
color:blue !important;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Página de operações">
<title> Operar </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/meucss.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" id="nav" style="margin-bottom: 0px;">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="javascript:history.back()"> Previous Page </a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"> Home </a></li>
<li class="#"><a href="#"> About </a></li>
<li> <a class="dropdown-toggle" href="#" data-toggle="dropdown"> Learn <b class="caret"> </b></a>
<ul class="dropdown-menu">
<li class="dropdown-header"> Examples </li>
<li><a href="#"> C++ </a></li>
<li><a href="#"> Java </a></li>
<li class="dropdown-header"> Tutorials </li>
<li><a href="#"> JavaScript</a></li>
<li><a href="#"> Cobol </a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
我更新了引导程序的 css CDN 的链接，并将导航元素从“标题”更改为“导航”，每个引导程序文档在这里找到：[
http://getbootstrap.com/components/#navbar][1]
看起来好像 Bootstrap 原生使用“nav”元素作为导航的容器。我希望这会有所帮助
.navbar-inverse {
background:#f46e42 !important;
color:blue !important;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Página de operações">
<title> Operar </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/meucss.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" id="nav" style="margin-bottom: 0px;">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="javascript:history.back()"> Previous Page </a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"> Home </a></li>
<li class="#"><a href="#"> About </a></li>
<li> <a class="dropdown-toggle" href="#" data-toggle="dropdown"> Learn <b class="caret"> </b></a>
<ul class="dropdown-menu">
<li class="dropdown-header"> Examples </li>
<li><a href="#"> C++ </a></li>
<li><a href="#"> Java </a></li>
<li class="dropdown-header"> Tutorials </li>
<li><a href="#"> JavaScript</a></li>
<li><a href="#"> Cobol </a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
【解决方案2】：
你可以在下面提到的css中做到这一点--
.navbar-inverse{
background:#f46e42 !important;
}
.navbar-nav > li >a{
color:blue !important;
}
但通常使用!important 不被认为是好的做法。
通过为元素分配一个 id/类来做到这一点--
工作示例
#nav{
background:#f46e42;
}
#nav_links >li >a{
color:blue;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Página de operações">
<title> Operar </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header class="navbar navbar-inverse navbar-static-top" id="nav" style="margin-bottom: 0px;">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="javascript:history.back()"> Previous Page </a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse" id="myNavbar">
<ul id="nav_links" class="nav navbar-nav navbar-right">
<li class="active"><a class="" href="#"> Home </a></li>
<li class="#"><a href="#"> About </a></li>
<li> <a class="dropdown-toggle" href="#" data-toggle="dropdown"> Learn <b class="caret"> </b></a>
<ul class="dropdown-menu">
<li class="dropdown-header"> Examples </li>
<li><a href="#"> C++ </a></li>
<li><a href="#"> Java </a></li>
<li class="dropdown-header"> Tutorials </li>
<li><a href="#"> JavaScript</a></li>
<li><a href="#"> Cobol </a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
【解决方案3】：
更改导航栏的 bootstrap .class 试试这个
.navbar-inverse-ok{
background:#f46e42 !important;
color:blue;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Página de operações">
<title> Operar </title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/meucss.css">
</head>
<body>
<header class="navbar navbar-inverse-ok navbar-static-top" id="nav" style="margin-bottom: 0px;">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="javascript:history.back()"> Previous Page </a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"> Home </a></li>
<li class="#"><a href="#"> About </a></li>
<li> <a class="dropdown-toggle" href="#" data-toggle="dropdown"> Learn <b class="caret"> </b></a>
<ul class="dropdown-menu">
<li class="dropdown-header"> Examples </li>
<li><a href="#"> C++ </a></li>
<li><a href="#"> Java </a></li>
<li class="dropdown-header"> Tutorials </li>
<li><a href="#"> JavaScript</a></li>
<li><a href="#"> Cobol </a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>