我有一个带有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ädagogisches Konzept</a>
<a class="dropdown-item" href="#">Räumlichkeiten</a>
<a class="dropdown-item" href="#">Öffnungszeiten und Preise</a>
</div>
</li>
<li>
<a class="nav-link" href="#">Aktuelles</a>
</li>
<li>
<a class="nav-link" href="#">Freie Plä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;
}