Question

如何编辑此内容才能看到导航栏选项。目前它与背景颜色相同。我想将之前的字体更改为白色，并在将其悬停到蓝色字体的白色背景时进行更改。

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<nav class="navbar navbar-dark bg-primary navbar-fixed-top " role="navigation">
  <div class="container">
    <div class="navbar-header">
      <div class="tog" style="padding-top:7px; ">
        <a href="#menu-toggle" class="btn btn-default btn-sm" id="menu-toggle"> <span class="glyphicon glyphicon-eye-open"></span> 
        </a>
      </div>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse" id="top-nav">
      <ul class="nav navbar-nav">
        <li><a href="#"><i class="fa fa-home"></i> Home</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-suitcase"></i><span class="glyphicon glyphicon-envelope"> </span></a>
        </li>
        <li><a href="#"><i class="fa fa-suitcase"></i><span class="	glyphicon glyphicon-bell"> </span></a>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
            <img src="http://placehold.it/30x30" class="img-circle special-img">xxx <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#"><i class="fa fa-cog"></i> Account</a>
            </li>
            <li class="divider"></li>
            <li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

转到您下载的bootstrap.css文件，并在第4489行附近进行更改。

更改此选择器的css

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #333;
    background-color: transparent;
}

我怎样才能改变bootstrap navbar hover

1 个答案: