Bootsrap 5.3 导航栏不会拉伸到页面的宽度

Question

我试图让引导程序导航栏中的列表项在移动视图中拉伸页面的所有宽度，但它不起作用。

我在这里尝试了一些教程，但都没有用。 我什至在 CSS 中尝试过 *{margin:0;padding:0;} 但它不起作用。 我希望导航栏列表元素的宽度在移动视图中拉伸到页面的宽度。

这是它在浏览器中的样子：

 #header-nav { background-color: rgb(162, 162, 162); border-radius: 0; border-top: 5px solid black; border-bottom: 5px solid black; }.navbar-brand a { text-decoration: none; }.navbar-brand h1 { font-family: 'Ubuntu', sans-serif; font-weight: bold; color: black; text-shadow: 1px 1px 1px white; }.navbar-brand a:hover, a:focus { text-decoration: none; }.nav-item a { color: black; font-family: 'Ubuntu', sans-serif; font-weight: bold; text-align: center; background-color: white; }.nav-item a:hover, a:focus, a:active { color: black; background-color: rgb(188, 188, 188); }.navbar-nav { border-top: 3px solid black; } #chickenNav, #beefNav { border-bottom: 2px solid black; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <header> <nav id="header-nav" class="navbar"> <div class="container"> <div class="navbar-header"> <div class="navbar-brand"> <a href="index.html"> <h1>Food, LLC</h1> </a> </div> </div> <button class="navbar-toggler d-block d-sm-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-controls="collapse" aria-expanded="false" aria-label="Toggle navigation">=</button> <div class="collapse navbar-collapse" id="collapse"> <ul class="navbar-nav"> <li class="nav-item"> <a id="chickenNav" class="nav-link" href="#">Chicken</a> </li> <li class="nav-item"> <a id="beefNav" class="nav-link" href="#">Beef</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Sushi</a> </li> </ul> </div> </div> </nav> </header> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Answer 1

您可以只使用Bootstrap 的间距类根据需要进行调整。 我正在使用px-0从容器中删除水平填充，然后使用px-2将其添加回导航 header 。

 #header-nav { background-color: rgb(162, 162, 162); border-radius: 0; border-top: 5px solid black; border-bottom: 5px solid black; }.navbar-brand a { text-decoration: none; }.navbar-brand h1 { font-family: 'Ubuntu', sans-serif; font-weight: bold; color: black; text-shadow: 1px 1px 1px white; }.navbar-brand a:hover, a:focus { text-decoration: none; }.nav-item a { color: black; font-family: 'Ubuntu', sans-serif; font-weight: bold; text-align: center; background-color: white; }.nav-item a:hover, a:focus, a:active { color: black; background-color: rgb(188, 188, 188); }.navbar-nav { border-top: 3px solid black; } #chickenNav, #beefNav { border-bottom: 2px solid black; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <header> <nav id="header-nav" class="navbar"> <div class="container px-0"> <div class="navbar-header px-2"> <div class="navbar-brand"> <a href="index.html"> <h1>Food, LLC</h1> </a> </div> </div> <button class="navbar-toggler d-block d-sm-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-controls="collapse" aria-expanded="false" aria-label="Toggle navigation">=</button> <div class="collapse navbar-collapse" id="collapse"> <ul class="navbar-nav"> <li class="nav-item"> <a id="chickenNav" class="nav-link" href="#">Chicken</a> </li> <li class="nav-item"> <a id="beefNav" class="nav-link" href="#">Beef</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Sushi</a> </li> </ul> </div> </div> </nav> </header> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>