个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 05:41:17 24 4
gpt4 key购买 nike

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

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

最佳答案

添加此 CSS:

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

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

关于html - Bootstrap 自定义导航栏折叠按钮未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59205337/

24 4 0
文章推荐： python - 安装 awsebcli 时出错
文章推荐： c++ - 用 C 或 C++ 扩展 Python 有什么好处？
文章推荐： python - 操作系统 : Maya Python Qt conflict with system libraries
文章推荐： javascript - 在 html5 视频中切换音量
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com