Bootstrap 自定义导航栏折叠按钮未显示答案

【问题标题】：Bootstrap custom navbar collapse button not showingBootstrap 自定义导航栏折叠按钮未显示
【发布时间】：2019-12-06 00:48:35
【问题描述】：

我的自定义引导导航栏正确折叠，但折叠期间的菜单按钮未显示。如果我在该区域周围单击，我可以找到一个链接，让我放下下拉菜单，但我看不到按钮。我想也许我的自定义导致它不可见或在实际导航栏后面。这是我的 HTML/CSS

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">



<style>
.navbar-custom {
    background-color: #141414;
    width: 100%;
    float: none;
    margin:0;
    padding:5px;
    font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;

}

.navbar-nav > li{
  margin-left:5px;
  margin-right:15px;

}


/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);


}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: #fff;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #85b0be;
}

.navbar-custom .navbar-logo {
  margin-right: 60%;
}


.navbar-custom .navbar-nav li>a:hover{
  border-bottom: 3px solid;
  bottom: 0;
  content: " ";
  left: 0;
  width: 100%;

}

.text-my-own-color {
  color: #85b0be !important; 
}




.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #85b0be !important;
    border-color: white !important;}

</style>

</head>

<body>
<nav class="navbar navbar-custom navbar-expand-sm justify-content-end">
<a class="navbar-logo" href="#">
    <img style="opacity:0.7;filter:alpha(opacity=40); width:50px;" src="{% static 'img/logo.bmp' %}" alt="">
  </a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbar" aria-expanded="false">
            <i class="fa fa-bolt color-white"></i>
  </button>

  <div class="navbar-collapse collapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
  </ul>
</div>
</nav>
</body>

运行上面的代码将生成一个在特定屏幕宽度处折叠的导航栏，但我就是找不到折叠按钮的去向。感谢您的帮助！

【问题讨论】：

如果你怀疑它在某些东西后面，试着给它一个高 z-index 看看会发生什么。在浏览器中使用开发者控制台可能也会对您有所帮助。

标签： html css twitter-bootstrap

【解决方案1】：

添加这个 CSS：

  .navbar-toggler {
    background-color: orange !important;
  }

您还可以检查 CSS 是否在没有 !important 的情况下工作。如果是这样，你可以放弃它。更干净的 CSS。

【讨论】：