CSS 引导程序 4 中的活动导航栏链接下划线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45833358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Underline active navbar links in bootstrap 4
提问by ChaoticNadirs
I'm upgrading a website from bootstrap 3 to 4 (beta). The css I used to underline active navbar links is no longer working. Instead of underlining the item, it underlines the full width of the page. How can I underline active nav items in bootstrap 4?
我正在将网站从引导程序 3 升级到 4（测试版）。我用来在活动导航栏链接下划线的 css 不再有效。它不是在项目下划线，而是在页面的整个宽度下划线。如何在 bootstrap 4 中为活动导航项目加下划线？
Bootstrap 3 css
引导程序 3 css
.navbar-default .navbar-nav > .active:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
content: " ";
border-bottom: 5px solid #5BC0EB;
}
Attempted Bootstrap 4 css
尝试 Bootstrap 4 css
.navbar-light .navbar-nav .active::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
content: " ";
border-bottom: 5px solid #5BC0EB;
}
HTML
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>
回答by RaJesh RiJo
This happened because of your positioning.
这是因为你的定位。
Try to set relativeposition to your liand set after to atag inside liwhich will be absolutepositioned like below
尝试将relative位置设置为您的位置，li然后设置为a内部标记li，其absolute位置如下所示
.navbar-nav > li {
float: left;
position: relative;
}
.navbar-light .navbar-nav .active a::after {
border-bottom: 5px solid #5bc0eb;
bottom: -10px;
content: " ";
left: 0;
position: absolute;
right: 0;
}
Hope it helps.
希望能帮助到你。
