我正在尝试将线条扩展到导航栏的整个宽度，而不是仅仅覆盖链接。我认为第 7 行(包含)上的代码/样式表干扰了第 12-21 行下方的 html 样式标签。但是，如果我删除此行，那么黑色背景就会消失，链接将显示为列表。
<!doctype html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<style>
.navbar-nav a {
border-top:3px solid #DB9842;
border-bottom: 3px solid #DB9842;
}
</style>
<body>
<div>
<nav class="navbar-nav navbar-expand-sm bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
</div>
</body>
</html>最佳答案
从您的样式地址中删除A
您在 a 链接而不是 .navbar-nav 上有边框。 a 链接样式只会覆盖可点击的部分，而不是整个导航区域。
要解决这个问题，如果您从样式中删除 a，按照下面的代码，它将跨越导航的整个宽度。
.navbar-nav {
border-top:3px solid #DB9842;
border-bottom: 3px solid #DB9842;
}
因为 .navbar-nav 样式也在 ul 元素上，它创建了双边框。为防止这种情况，我添加了以下代码，以便边框仅应用于导航区域，而不应用于 ul。
.navbar-nav ul {border:none;}
<!doctype html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<style>
.navbar-nav {
border-top:3px solid #DB9842;
border-bottom: 3px solid #DB9842;
}
.navbar-nav ul {border:none;}
</style>
<body>
<div>
<nav class="navbar-nav navbar-expand-sm bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
</div>
</body>
</html>关于html - 导航栏 - 需要将顶部和底部线扩展到 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52357533/