更改折叠的导航栏中导航标签的外观

时间:2019-08-10 09:45:20

标签: bootstrap-4

我有一个带有nav标签的可折叠引导导航栏。我只想在折叠菜单中更改选项卡的边框。 我找不到合适的类来更改CSS。 是否有默认版本?

移动导航栏

导航栏扩展

因此,在扩展版本中,我希望看到悬停时的黑色边框,如图中所示。 但是在移动菜单中,我不希望在图片中看到黑色边框。

    <!-- Navigation-->
    <nav class="navbar navbar-expand-md bg-warning">
    <div class="container">
        <a class="navbar-brand" href="index.shtml"><img src="img/schriftzug.png" width="262px"></a>

    <!-- Toggler/collapsibe hamburger Button -->
    <button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
    aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
    <div class="animated-icon"><span></span><span></span><span></span></div>
  </button>

    </div>
  <!-- Links-->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
  <ul class="navbar-nav nav-tabs nav-justified">
    <li class="dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Über Uns
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="team.shtml">Unser Team</a>
          <a class="dropdown-item" href="konzept.shtml">P&auml;dagogisches Konzept</a>
          <a class="dropdown-item" href="#">R&auml;umlichkeiten</a>
          <a class="dropdown-item" href="#">&Ouml;ffnungszeiten und Preise</a>
          </div>
    </li>
    <li>
      <a class="nav-link" href="#">Aktuelles</a>
    </li>
    <li>
      <a class="nav-link" href="#">Freie&nbsp;Pl&auml;tze</a>
    </li>
    <li>
        <a class="nav-link" href="#">Internes</a>
      </li>
  </ul>
</div>
</nav>
   .nav-tabs {
    border-bottom: 1px solid #000000;
  }


  .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    border-color: #000000 #000000 transparent;
  }

  .nav-tabs .nav-link.disabled {
    color: #6c757d;
    background-color: transparent;
    border-color: transparent;
  }

  .nav-tabs .nav-link.active,
  .nav-tabs .nav-item.show .nav-link {
    color: #495057;
    background-color: #fff;
    border-color: #000000 #000000 #fff;
  }

0 个答案:

没有答案