通知图标的下 zipper 接激活并闪烁铃铛图标的背景颜色，有没有办法阻止这种情况发生？
当下拉菜单打开并且您单击搜索框字段时它也会激活铃铛图标的背景颜色时也会发生此行为，需要如何停止这种情况？
body {
padding-top: 102px;
background-color: #4d4d4d;
font-family: 'Lato', verdana, sans-serif;
}
.container {
width: 1530px;
margin-top: 0;
}
.navbar-fixed-top {
background-color: #fff;
}
.navbar-header {
min-height: 80px;
}
.hamburger-icon {
margin-top: 20px;
}
.navbar-default .navbar-brand {
line-height: 45px;
font-size: 45px;
color: #010101;
text-transform: uppercase;
}
.navbar-default .navbar-brand span {
font-style: normal;
color: #ff5500;
}
.search .input-group {
padding-top: 15px;
font-family: 'Lato', sans-serif;
}
.search .input-group input.search-field {
padding: 0 10px 0 0;
border-radius: 0;
border: 0;
box-shadow: none;
background-color: #fff;
font-size: 18px;
font-weight: 100;
}
.search .input-group input.search-field:hover {
background-color: transparent;
}
.search .input-group-btn button {
padding: 2px;
border: 0;
box-shadow: none;
background-color: transparent;
border-radius: 0;
}
.search .input-group-btn button:hover {
background-color: #fff;
color: #ff5500;
}
.search .input-group-btn .glyphicon-search {
font-size: 22px;
}
.dropdown-toggle.inbox {
padding-top: 15px;
margin-bottom: 5px;
}
.dropdown-menu.bell {
background-color: #f8f8f8;
border-radius: 0;
box-shadow: 0;
}
.dropdown-menu.bell li a:link {
padding-top: 5px;
padding-bottom: 5px;
white-space: normal !important;
width: 350px;
}
.nav>li.dropdown.bell li a:hover {
color: #ff5500;
background-color: transparent;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
color: #ff5500;
background-color: transparent;
}
.dropdown-menu.bell li.divider {
padding: 0;
margin: 0 20px;
}
.dropdown-menu.bell .label {
background-color: transparent;
color: #aaa;
font-weight: 100;
}
.badge-notify {
background: #ff5500;
margin-top: -24px;
margin-left: -20px;
height: 1.7em;
}
span.notify-link {
display: block;
padding: 0 5px 0 5px;
}
/* caret for notification dropdown */
.dropdown-menu.bell:before {
position: absolute;
top: -10px;
right: 9%;
display: inline-block;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu.bell:after {
position: absolute;
top: -9px;
right: 9%;
display: inline-block;
border-right: 9px solid transparent;
border-bottom: 9px solid #f8f8f8;
border-left: 9px solid transparent;
content: '';
}
.user span.fullname {
font-size: 14px;
color: #010101;
font-weight: 400;
}
.user span:last-child {
padding-right: 10px;
}
.user span:first-child {
padding-right: 30px;
padding-left: 10px;
}
.user .dropdown-menu.user-list {
width: 100%;
border-radius: 0;
border: 0;
background-color: #f8f8f8
}
.user .dropdown-menu.user-list li a {
margin: 5px 0px;
color: #010101;
}
.user .dropdown-menu.user-list li a:hover {
background-color: transparent;
color: #ff5500;
}
.user .dropdown-menu.user-list li.divider {
padding: 0;
margin: 0 20px;
}
/* Large desktop */
@media (max-width: 1590px) {
.container {
width: auto;
}
}
/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) {}
/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
.container {
width: auto;
}
.navbar-default .navbar-brand {
font-size: 40px;
}
.dropdown.bell .inbox {
width: 100% !important;
}
.search {
padding-left: 10px;
padding-right: 10px;
margin-top: 0;
width: 100%;
overflow: hidden;
}
.search .input-group {
padding-top: 0;
}
.dropdown-menu.bell li a {
text-align: left;
}
.dropdown-menu.bell h4 {
margin: 0 0;
}
.dropdown-menu.bell:before,
.dropdown-menu.bell:after {
display: none;
}
.bell,
.user {
text-align: center;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
.navbar-default .navbar-brand {
font-size: 30px;
}
}<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">team<span>or</span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- search bar -->
<li class="dropdown search">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control search-field" placeholder="Search name or keyword" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
</button>
</div>
</div>
</form>
</li>
<!-- notification bell -->
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
<span class="badge badge-notify">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><a href="#"><span class="label label-default">4:00 AM</span><span class="notify-link">Favourites Snippet</span></a>
</li>
<li class="divider"></li>
<li><a href="#"><span class="label label-warning">4:30 AM</span><span class="notify-link">Email marketing</span></a>
</li>
<li class="divider"></li>
<li><a href="#"><span class="label label-warning">5:00 AM</span><span class="notify-link">
Subscriber focused email design
Subscriber focused email design
Subscriber focused email design
Subscriber focused email design
</span></a>
</li>
<li class="divider"></li>
<li><a href="#" class="text-center">View All</a>
</li>
</ul>
</li>
<!-- user login information -->
<li class="dropdown user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-128.png" height="50" width="50" ></span>
<span class="fullname">Jacky Smith</span>
<span><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" height="20" width="20" ></span>
</a>
<ul class="dropdown-menu user-list" role="menu">
<li><a href="#">Action</a>
</li>
<li class="divider"></li>
<li><a href="#">Another action</a>
</li>
<li class="divider"></li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
<a href="#"></a>
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>最佳答案
我认为您需要的是定位 .dropdown-toggle 的 :focus 并将背景色设置为类似 #fff 或透明的颜色。像这样:
.bell .dropdown-toggle:focus { background-color: transparent; }
Bootstrap 使用了很多“固执己见”的样式，例如圆 Angular 、轮廓和焦点样式，这可能会让人很头疼。
关于html - Bootstrap 导航栏下拉行为如何停止链接背景颜色激活，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36920248/