导航栏颜色不是全宽

Question

我正在尝试创建一个全角导航栏，但它不是全角。

这是导航的 CSS 部分：

这是它的样子：

Answer 1

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

要解决这个问题，最好的方法就是将容器 class 更改为 .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 但我认为这可能会有所帮助注意我添加了 bootstrap

<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>

导航栏颜色不是全宽

Navbar color is not full width

html

css

width

nav

navbar