我如何编辑它才能看到导航栏选项。目前它与背景颜色相同。我想将之前的字体更改为白色,并在它悬停到白色背景和蓝色字体时更改它们。
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-dark bg-primary navbar-fixed-top " role="navigation">
<div class="container">
<div class="navbar-header">
<div class="tog" style="padding-top:7px; ">
<a href="#menu-toggle" class="btn btn-default btn-sm" id="menu-toggle"> <span class="glyphicon glyphicon-eye-open"></span>
</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" id="top-nav">
<ul class="nav navbar-nav">
<li><a href="#"><i class="fa fa-home"></i> Home</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-suitcase"></i><span class="glyphicon glyphicon-envelope"> </span></a>
</li>
<li><a href="#"><i class="fa fa-suitcase"></i><span class=" glyphicon glyphicon-bell"> </span></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
<img src="http://placehold.it/30x30" class="img-circle special-img">xxx <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-cog"></i> Account</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
最佳答案
转到您下载的 bootstrap.css 文件并在第 4489 行附近进行更改..
改变这个选择器的CSS
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
color: #333;
background-color: transparent;
}
关于javascript - 我如何更改 Bootstrap 导航栏悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37370790/