个人中心
gpt4 book ai didi

html - 如何在导航栏折叠时更改背景颜色

转载 作者：太空宇宙 更新时间：2023-11-04 02:19:03 25 4
gpt4 key购买 nike

当折叠的导航栏上下移动时，如何更改它的背景颜色？我更改了 bootstrap.css 的几个部分:

.navbar{
  background-color: #A9B7C0;
  border-bottom-color: #EFD9C1;
}

.navbar-inverse {
  background-color: #A9B7C0 !important;
}

.container .navHeaderCollapse .nav li a {
  color: #EFD9C1;
}

.container .navHeaderCollapse .nav .dropdown .dropdown-menu li a {
  color: black;
}

.navbar .navbar-brand{
  color: #EFD9C1;
}
.navbar .navbar-brand:hover{
  color: #EAC67A;
}

.collapse .nav .active a{
  color: #A9B7C0 !important;
  background-color:#EFD9C1;
}

.collapse .nav .active a:hover{
  background-color:#EFD9C1;
  color: #A9B7C0;
}

body {
  background-color: #CCCBC6;
  color:white;
}

@media screen and (max-width: 375px) {
  .fullName{
    display:none;
  }
}

虽然向下折叠或返回压缩模式的操作仍在进行中，但背景颜色仍然是黑色，我希望它是我自定义 Bootstrap 的颜色。一旦它完成折叠，它就会变成我设置的 bg-color。

这是我的 html 代码:

<div class="navbar navbar-inverse navbar-static-top">
  <div class ="container">
    <div class="navbar-header">
      <a href="http://www.facebook.com/rayvenhatesyou" class="navbar-brand"> <span class="glyphicon glyphicon-user"></span> <span class="fullName">Rayven Yor Zambo Esplanada</span></a>
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="(1)Home.html">Home</a></li>
        <li><a href="(2)AboutMe.html">About Me</a></li>
        <li class="dropdown">
          <a href="(3)MyFamily.html" class="dropdown-toggle" data-toggle = "dropdown">My Family <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#"> Mother </a></li>    
            <li><a href="#"> Father </a></li>    
            <li><a href="#"> Younger Brother </a></li>    
            <li><a href="#"> Older Brother </a></li>    
          </ul>
        </li>
        <li><a href="(4)Contact.html">Contact Me</a></li>
      </ul>
    </div>
  </div>
</div>

最佳答案

您需要使用与 bootstrap 相同的 选择器，即:.navbar-inverse .navbar-nav>.active>a 这就是您的样式将如何覆盖bootstrap 的风格。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
      .navbar{
        background-color: #A9B7C0;
        border-bottom-color: #EFD9C1;
      }

      .navbar-inverse {
        background-color: #A9B7C0 !important;
      }

      .container .navHeaderCollapse .nav li a {
        color: #EFD9C1;
      }

      .container .navHeaderCollapse .nav .dropdown .dropdown-menu li a {
        color: black;
      }

      .navbar .navbar-brand{
        color: #EFD9C1;
      }
      .navbar .navbar-brand:hover{
        color: #EAC67A;
      }

      .collapse .nav .active a{
        color: #A9B7C0 !important;
        background-color:#EFD9C1;
      }

      .collapse .nav .active a:hover{
        background-color:#EFD9C1;
        color: #A9B7C0;
      }

      body {
        background-color: #CCCBC6;
        color:white;
      }

      .navbar-inverse .navbar-nav>.active>a {
        background:#EFD9C1;
        color: #A9B7C0 !important;
      }

      @media screen and (max-width: 375px) {
        .fullName{
          display:none;
        }
      }
    </style>
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-static-top">
      <div class ="container">
        <div class="navbar-header">
          <a href="http://www.facebook.com/rayvenhatesyou" class="navbar-brand"> <span class="glyphicon glyphicon-user"></span> <span class="fullName">Rayven Yor Zambo Esplanada</span></a>
          <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="(1)Home.html">Home</a></li>
            <li><a href="(2)AboutMe.html">About Me</a></li>
            <li class="dropdown">
              <a href="(3)MyFamily.html" class="dropdown-toggle" data-toggle = "dropdown">My Family <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#"> Mother </a></li>    
                <li><a href="#"> Father </a></li>    
                <li><a href="#"> Younger Brother </a></li>    
                <li><a href="#"> Older Brother </a></li>    
              </ul>
            </li>
            <li><a href="(4)Contact.html">Contact Me</a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

http://jsbin.com/weguya/edit?html,css,output

关于html - 如何在导航栏折叠时更改背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38421885/

25 4 0
文章推荐： c - 链接列表不打印列表
文章推荐： python - 在 Python 中使用 readline() 读取文件的正确条件
文章推荐： c# - C/C++/C#中的DES实现
文章推荐： node.js - http响应是否发送到客户端或负载均衡器
太空宇宙
个人简介

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

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