0
通知图标的下拉链接激活并闪烁铃声图标的背景颜色，有没有办法阻止这种情况发生？Bootstrap导航栏下拉行为如何停止链接背景颜色激活
当下拉列表打开并且您单击搜索框字段时，它也会激活铃铛图标的背景颜色，并且需要停止此操作，这种情况也会发生。
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">
\t \t \t \t \t \t Subscriber focused email design
\t \t \t \t \t \t Subscriber focused email design
\t \t \t \t \t \t Subscriber focused email design
\t \t \t \t \t \t Subscriber focused email design
\t \t \t \t \t \t </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">
\t \t \t <a href="#"></a>
\t \t \t </div>
\t \t \t <div style="height: 1em;">
\t \t \t </div> -->
</div>
</div>
</div>
</div>
感谢您的回复。我一定会试试这个:)我没有想到把颜色改成白色：P ......我的坏大声......是的你的权利，肯定有很多“自以为是”的风格，在屁股疼痛！ – Krys