如何修复我的引导导航栏间距？我不知道如何将其扩展到屏幕的整个宽度？

Question

我试图创建一个网站的导航栏是屏幕的全宽度，并有一个黑色的背景。我希望链接也居中并均匀分布。

我想去掉左边和右边的空白，让它从头到尾都是黑色的背景。我找不到任何修复

CSS

.masthead {
height: 25vh;
min-height: 500px;
background-image: url('https://source.unsplash.com/BtbjCFUvBXs/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* NAVBAR */
/* Evenly Distribute Navbar Components */
.navbar-nav > li{
padding-left:30px;
padding-right:30px;
}
.navbar {
background-color: #000000;
}

HTML

<body">
<section class="header">
<div class="container">
<!-- Navigation Bar -->
<div class="row">
<div class="navbar2 col-md-12" data-interval="false">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">MAD</a>
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book a Service</a>
</li>
<li class=[![enter image description here](https://i.stack.imgur.com/MKM0z.png)](https://i.stack.imgur.com/MKM0z.png)"nav-item">
<a class="nav-link" href="#"
>Shop</a
>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</section>

Answer 1

您在这里面临的问题是由于container，因为它将您的导航限制在一定的范围内。

这可以通过将container元素从nav的父元素移动到nav的子元素来解决，就像这样。

<section class="header">
<!-- Navigation Bar -->
<div class="row">
<div class="navbar2 col-md-12" data-interval="false">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="#">MAD</a>
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book a Service</a>
</li>
<li class=[![enter image description here](https://i.stack.imgur.com/MKM0z.png)](https://i.stack.imgur.com/MKM0z.png)"nav-item">
<a class="nav-link" href="#"
>Shop</a
>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</section>

或者如果您不需要容器，您可以删除它或根据您的情况将container类更改为container-fluid。