我正在将一个网站从bootstrap 3升级到4(测试版).我用来强调活动导航栏链接的CSS不再有效.它不是强调项目的下划线,而是强调页面的整个宽度.如何在bootstrap 4中为活动导航项加下划线?
Bootstrap 3 css
.navbar-default .navbar-nav > .active:after { position: absolute; bottom: 0; left: 0; width: 100%; content: " "; border-bottom: 5px solid #5BC0EB; }
尝试Bootstrap 4 css
.navbar-light .navbar-nav .active::after { position: absolute; bottom: 0; left: 0; width: 100%; content: " "; border-bottom: 5px solid #5BC0EB; }
HTML
<nav class="navbar fixed-top navbar-light bg-light navbar-expand-md"> <div class="container"> <a class="navbar-brand" href="#">My Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="main-nav-collapse"> <ul class="navbar-nav"> <li class="nav-item active"><a class="nav-link" href="#about">About</a></li> <li class="nav-item"><a class="nav-link" href="#classes">Classes</a></li> <li class="nav-item"><a class="nav-link" href="#gallery">gallery</a></li> <li class="nav-item"><a class="nav-link" href="#events">Events</a></li> <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li> <li class="nav-item"><a class="nav-link" href="#offers">Offers</a></li> </ul> </div> </div> </nav>