Question

我的bootstrap菜单栏有以下问题：当我点击＆＃34;登录＆＃34;然后我点击＆＃34; En＆＃34;链接登录链接变为黑色。

我已将背景颜色设置为＃ee4035 我也尝试了悬停/焦点属性。

关于我错过的任何想法？

这是我的html的副本： https://jsfiddle.net/ebj2zt72/

感谢

<style>
    .navbar {
    min-height: 80px;
    background: #ee4035;
    border-width: 0px;
    border-radius: 0px;
    color: blue;
  }

  .navbar a {
    color: white!important;
  }

  .navbar-brand {
    padding: 0 15px;
    height: 80px;
    line-height: 80px;
    color: white;
  }

  .navbar-toggle {
    /* (80px - button height 34px) / 2 = 23px */
    margin-top: 23px;
    padding: 9px 10px !important;
  }

  .navbar-btn {
    /* (80px - button height 34px) / 2 = 23px */
    margin-top: 18px;
    margin-right: 30px;
    padding: 9px 10px !important;
    background: #f37736;
    border-width: 0px;
  }

  .navbar-text {
    margin-top: 28px;
    color: white;
  }

  .nav.navbar-nav.navbar-right li a {
    color: white;
  }

  .dropdown-menu {
    background: #ee4035;
  }

  .dropdown-menu > li > a:hover,
  .dropdown-menu > li > a:focus {
    background-color: #d6392f;
  }

  .navbar-inverse .navbar-nav > li.dropdown:hover > a,
  .navbar-inverse .navbar-nav > li.dropdown:hover > a:hover,
  .navbar-inverse .navbar-nav > li.dropdown:hover > a:focus {
    background-color: #d6392f;
  }
</style>



<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">

      <ul class="nav navbar-nav navbar-right">
        <li class="inline">
          <p class="navbar-text" style="color:white"><strong>goodmorning? </strong></p>
        </li>
        <li>
          <button class="btn btn-danger navbar-btn"> Click me</button>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" id="user-navbar" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span> Sign in</a>
          <ul class="dropdown-menu">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" id="lang-selector" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-globe"></span> En <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">English</a></li>
            <li><a href="#">Ellinika</a></li>
            <li><a href="#">Italian</a></li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
</nav>

  </body>

</html>

Answer 1

如果您的问题是您不想让链接的颜色发生变化，或者换句话说，您不希望在悬停和/或点击时看到链接上的任何样式，那么您可以执行此操作因此，如果您可以提供内联样式（总是尽量避免在您选择的.css文件或样式标记中提供的所有样式），则手动修改您使用的相应类别或更好的类别如何在不同的环境中出现。兄弟，如果你允许我更有效地帮助那么请编辑你的jsfiddle文件，因为它是空的，你的问题陈述中没有太多清楚。

关于链接变黑，有时会直接使用bootstrap类作为故障，因为bootstrap类在bootstrap css中设置背景颜色。因此，当您切换已设置的背景颜色时，会显示。您必须根据自己的喜好进行设置。

例如，如果下拉切换类的默认颜色设置为background-color：＃111111;和/或＃e5e5e5假设，这就是你在悬停时得到深色的原因。

失去焦点时引导导航栏项目会改变颜色

1 个答案: