【发布时间】：2018-10-06 20:05:00
【问题描述】：
我一直在研究我的Bootstrap Nav 并解决了一些问题，但不知何故在努力解决这个问题，它使活动链接的底部边框占据了文本的宽度，而不是它所在的容器. 所以为此想出了这个想法，在活动链接的边框底部添加一些边距。
经过无数次努力，我得到的只是混乱的用户界面。我需要你们的帮助，今天能学到一些东西会很棒。
代码
尝试添加代码 sn-p 但引导导航无法正常工作。
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<!-- Just an image -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#home" style="border-bottom: none">HOME</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-lg-3"></div>
<div class="pt-lg-0 pt-3 collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#section-1">SECOND PAGE</a>
<a class="nav-item nav-link" href="#section-2">THIRD PAGE</a>
</div>
</div>
</div>
</nav>
<section class="testimonial home-page" id="home">
<div class="container">
<h1>Bringing ease to<br>each home</h1>
<div class="d-none d-sm-block" style="margin-top: 350px"></div>
</div>
</section>
<section class="testimonial home-page" id="section-1">
<div class="container">
<h1>Second Page</h1>
<div class="d-none d-sm-block" style="margin-top: 350px"></div>
</div>
</section>
<section class="testimonial home-page" id="section-2">
<div class="container">
<h1>Third Page</h1>
<div class="d-none d-sm-block" style="margin-top: 350px"></div>
</div>
</section>
</body>
</html>
CSS
.navbar {
top: 0px;
width: 100%;
z-index: 999;
display: block;
padding: 20px !important;
position: fixed!important;
-webkit-backface-visibility: hidden
}
.navbar-nav a {line-height: normal}
.home-page H1 {padding-top: 219px;color: #616161}
.active {color: grey!important; border-bottom: 5px solid #8ABE25}
活动链接的 JAVASCRIPT
$(document).ready(function () {
$('.navbar div a').click(function(event){
//remove all pre-existing active classes
$('.active').removeClass('active');
//add the active class to the link we clicked
$(this).addClass('active');
});
});
我从这个this 中尝试过的是：
.active {
position: fixed!important;
content: '';
border-bottom: 1px solid #d2d7da;
width: 70%;
transform: translateX(-50%);
bottom: -15px;
left: 50%;
}
搞砸了我的用户界面。还尝试了box-sizing: border-box，但在我的情况下没有成功。
结果我想要的是这样的：
这是我的 JsFiddle 链接：JsFiddle Result 如果导航栏没有打开，请展开结果以便您可以看到另一个选项，不知道为什么 JsFiddle 表现得很奇怪。 任何帮助将不胜感激。
【问题讨论】：
标签： javascript html css bootstrap-4 navbar