Bootstrap 导航栏下拉菜单 "Flashes" 单击关闭时为白色

Question

当您点击导航栏上的下拉按钮（标签为 Dropdown 的按钮），然后点击关闭（在页面的任意位置）时，您可以看到下拉按钮短暂闪烁白色。

我见过这个非常相似的错误：。但不幸的是，它不起作用（实际上是在 css 中复制并粘贴完全相同的代码）。

这是 plunk 上 bug 的最小可重现版本：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;
}

非常感谢！

Answer 1

这是由于 Bootstrap 在焦点和悬停事件上应用了背景色。所以你可以覆盖这个行为

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover 
{
  background-color: unset !important;
}

Answer 2

我认为添加大量新的 CSS 类可能会令人困惑 Bootstrap。在您的沙箱 link 中详述的 CSS 中，有许多不同的后台命令都以一种或另一种方式指向您的导航栏和导航栏中的 link。这些很容易互相妨碍。您不必特别添加新的 CSS。您只需要编辑 Bootstrap 导航中已经存在的类。正是 focus 造成了麻烦。

.nav
.navbar-brand
.navbar-dropdown
.navbar-toggler-icon
.menu-item
.dropdown-item

尝试删除所有 background 说明，然后在上面添加新背景。

Bootstrap 导航栏下拉菜单 "Flashes" 单击关闭时为白色

Bootstrap Navbar Dropdown "Flashes" White When Clicking Off

html

css

twitter-bootstrap

twitter-bootstrap-3