html - 导航栏颜色不是全宽

Question

我正在尝试创建一个全宽导航栏，但它没有全宽。

这是导航的 CSS 的一部分：

这是它的外观：

Answer 1

好的，所以我能够解决您的问题。您在 html 中使用引导程序。Bootstrap 有一个带有“容器”类的元素，它有一个媒体查询 min-width: 1200px 将容器类的最大宽度设置为 1140px。这就是为什么你的导航栏不能超过 1140 像素。

要解决这个问题，最好的方法是简单地将你的容器类更改为 .my-container 或类似的东西。

这是一个例子：

HTML

<div class="my-container"> 
    <nav>navbar with 100% width...</nav>
</div>

CSS

.my-container {
    width:100%;
}
nav {
    width:100%;
}

这将解决您的问题。

Answer 2

当宽度设置为 100% 时，它占用其父级宽度的 100%。

所以我建议检查父母的宽度，如果问题发生在哪里，也许是它父母的父母。

您可以按 option+command+J 并打开元素。通过将鼠标悬停在出现问题的容器上。

否则，我对您提供的信息无能为力。

Answer 3

我认为它有一个父 div 或任何父标签我可能无法通过仅查看样式来判断出什么问题我可能需要你的 html 但我认为这可能有助于注意我添加了引导程序

<nav class="navbar navbar-expand-lg navbar-light bg-primary">
  <a class="navbar-brand" href="#">Navbar</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="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>