无法更改bootstrap的css

时间：2017-03-18 17:27:05

标签： jquery html css twitter-bootstrap navbar

我遇到了一个问题，我无法改变bootstrap的CSS上的内容。我已经尝试过直接编辑bootstrap并为覆盖创建另一个css，但两者都没有成功。例如，我想更改导航栏的背景颜色，但它不起作用（奇怪的是，它适用于移动设备），它仍然保留默认颜色的bootstrap，这是黑色。

我会在代码的一部分下面。

这就是我为过度创造的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>

3 个答案:

答案 0 :(得分：0)

我更新了bootstrap的css CDN的链接，并在每个bootstraps文档中将导航元素从“header”更改为“nav”：[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>
我更新了bootstrap的css CDN的链接，并在每个bootstraps文档中将导航元素从“header”更改为“nav”：[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>

答案 1 :(得分：0)

你可以在下面提到的css中实现 - 

.navbar-inverse{
 background:#f46e42 !important;

   }
 .navbar-nav > li >a{
 color:blue !important;
 }

但通常使用!important不被视为良好做法。

通过为元素分配id / class来做到这一点 -

工作示例

＆＃13;
＆＃13; 
#nav{
	 background:#f46e42;
   
}
#nav_links >li >a{
  color:blue;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

更改导航栏的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>

相关问题
最新问题