當您單擊導航欄上的下拉按鈕（標記為下拉的按鈕），然后單擊關閉（頁面中的任何位置）時，您可以看到下拉按鈕短暫閃爍白色。
我已經看到了這個非常相似的錯誤：Bootstrap navbar "flashing" when click outside of menu to close it。但不幸的是，它不起作用（實際上是在 css 中復制并粘貼完全相同的代碼）。
這是 plunk 上的錯誤的最小可重現版本：https ://embed.plnkr.co/plunk/nBIvKcLMkYbey8Oa
代碼：
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-static-top mb-0">
<ul class="nav navbar-nav">
<li class="nav-item dropdown" id="games-dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="/games/gravitygame/gravitygame.html">asdf</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
nav {
background-color: #26445a !important;
border-color: #26445a !important;
margin: 0px !important;
}
.navbar a{
color: #EEFBFB !important;
}
.navbar-header a{
font-size: 1.45em !important;
}
.nav >li > a:hover, .nav > li > a:focus{
background-color: #335369 !important;
}
.nav-item{
background-color: #26445a !important;
font-size: 1.23em !important;
}
#games-dropdown > .dropdown-menu a{
background-color: #ffffff !important;
color: #000000 !important;
font-size: 1.2em !important;
}
#games-dropdown > .dropdown-menu a:hover{
background-color: #d1d1d1 !important;
color: #000000 !important;
}
非常感謝！
uj5u.com熱心網友回復：
這是由于 Bootstrap 在焦點和懸停事件上應用了背景顏色。所以你可以覆寫這個行為
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover
{
background-color: unset !important;
}
uj5u.com熱心網友回復：
我認為添加大量新的 CSS 類可能會使 Bootstrap 感到困惑。在沙盒鏈接詳細說明的 CSS 中，有許多不同的背景命令都以一種或另一種方式指向您的導航欄和導航欄中的鏈接。這些很容易互相妨礙。您不必特別添加新的 CSS。您只需要編輯 Bootstrap nav 中已經存在的類。這focus是造成麻煩的具體原因。
.nav
.navbar-brand
.navbar-dropdown
.navbar-toggler-icon
.menu-item
.dropdown-item
嘗試洗掉所有background說明以開始，然后在上面添加新背景。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/423449.html
標籤：