分享
三行代码  ›  专栏  ›  技术社区  ›  otc09

引导导航栏链接颜色不正确 - Bootstrap Navbar Links not coloring properly

  •  1
  • otc09  · 技术社区  · 1 周前

    所以我使用一个引导导航条为我正在做的网站,当我试图改变链接的颜色,它只改变一个。

    我已经试过使用不同的类名并删除不必要的类。

    HTML格式:

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="landingPage">Cottrell Pier Association</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link colorMe" href="aboutUs">About Us<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item colorMe">
            <a class="nav-link" href="members-login">Members</a>
          </li>
          <li class="nav-item colorMe">
            <a class="nav-link" href="lifeguard-login">Lifeguards</a>
          </li>
        </ul>
      </div>
    </nav>
    

    CSS:

    .colorMe{
        color:darkgreen !important;
    }
    

    当我尝试这样做时,唯一改变的一个环节就是说“关于我们”。谢谢!

    3 回复  |  直到 1 周前
        1
  •  2
  •   j08691    1 周前

    你的 .colorMe 类存在于about us的链接上,但在其他两个的列表项父级上。只要将该类从列表项移动到链接,它就可以工作了。

    Bootply example

    仅在列表项父项上时不起作用的原因是bootstrap已经有一个更具体的选择器, .navbar-light .navbar-nav .nav-link ,它将覆盖您的css。

        2
  •  1
  •   Ashylen    1 周前

    因为你把课程 <li> 元素而不是 <a> 是的。希望有帮助。

    .colorMe{
        color:darkgreen !important;
    }
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="landingPage">Cottrell Pier Association</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link colorMe" href="aboutUs">About Us<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item ">
            <a class="nav-link colorMe" href="members-login">Members</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link colorMe" href="lifeguard-login">Lifeguards</a>
          </li>
        </ul>
      </div>
    </nav>
        3
  •  1
  •   Dhananjai Pai    1 周前

    更新类 colorMe a 元素而不是 li

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="landingPage">Cottrell Pier Association</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link colorMe" href="aboutUs">About Us<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link colorMe" href="members-login">Members</a>
          </li>
          <li class="nav-item">
            <a class="nav-link colorMe" href="lifeguard-login">Lifeguards</a>
          </li>
        </ul>
      </div>
    </nav>