Question

我想更改菜单中活动元素的背景颜色。我尝试了很多解决方案，但我仍然无法做到这一点。菜单和CSS：

＆＃13;

/* MAIN SITE NAVIGATION */

.navbar.navbar-default {
  font-size: 14px;
  background-color: #FFFFFF;
  border-bottom-width: 0px;
}
.navbar.navbar-default .navbar-nav {
  background-color: #FFFFFF;
}
.navbar.navbar-default .navbar-nav>li>a {
  color: #323232;
  background-color: #FFFFFF;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}
.navbar.navbar-default .navbar-nav>li>a:hover,
.navbar.navbar-default .navbar-nav>li>a:focus {
  color: #50A0FF;
  background-color: #FFFFFF;
}
.navbar.navbar-default .navbar-nav>.active>a,
.navbar.navbar-default .navbar-nav>.active>a:hover,
.navbar.navbar-default .navbar-nav>.active>a:focus {
  color: #50A0FF;
  background-color: #FFFFFF;
}
.navbar.navbar-default .navbar-nav li .active {
  background-color: red !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Pokaż MENU</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a>
            </li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

Menu photo

我希望有人会帮助我。抱歉我的英语：）

Answer 1

将此添加到您的css：

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #50A0FF;
    background-color: #ebebeb !important;
    display:block;
}

Answer 2

你已经在你的例子中这样做了。问题是你在添加#ffffff背景。只需将其更改为另一个。

这是你的班级样本

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #50A0FF;
    background-color: #FFFFFF; // change this to some color other than white
}

您还需要在style.css中添加此样式

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.open>a {
    background-image: initial;
}

/* MAIN SITE NAVIGATION */
.navbar-default {
    font-size: 14px;
    background-color: #FFFFFF;
    border-bottom-width: 0px;
}
.navbar-default .navbar-nav{
    background-color: #FFFFFF;
}
.navbar-default .navbar-nav>li>a {
    color: #323232;
    background-color: #FFFFFF;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
    color: #50A0FF;
    background-color: #FFFFFF;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #ffffff;
    background-color: #000000;
}
.navbar-default .navbar-nav li .active {
    background-color: red !important;
}

<nav class="navbar navbar-default navbar-static-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Pokaż MENU</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>

Answer 3

伙计们我删除了这一行

  <link rel="stylesheet" href="css/bootstrap-theme.min.css"/>

现在它正在工作：）

Answer 4

尝试对要更改背景颜色的元素使用以下内容

       .active a{
               background-color: green !important;
        }

更改引导活动菜单项颜色

4 个答案: