Question

我的自定义引导程序导航栏正在正确折叠，但是折叠过程中没有显示菜单按钮。如果单击该区域，则可以找到一个链接，该链接可让我拖放下拉菜单，但看不到该按钮。我认为我的自定义设置可能导致它不可见或位于实际导航栏的后面。这是我的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>

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

Answer 1

添加此CSS：

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

您还可以检查CSS是否在没有!important的情况下工作。如果是这样，可以将其删除。更干净的CSS。

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

1 个答案: