我正在将一个网站从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>
解决方法
原文地址:https://www.jb51.cc/css/215317.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。