当身体宽度超过100％时，如何使元素占据全宽？

Question

由于引导响应性，这适用于大多数浏览器。但我正在检查旧版浏览器，并发现了这一点。

似乎宽元素正在推出身体。好的，但是为什么导航栏没有占据整个宽度？

fiddle。 “链接到jsfiddle必须附带代码”：

<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="/">The Navbar</a>
 </nav>
 <div></div>
body {
  background-color: red;
}
div {
  display: inline-block;
  height: 20px;
  background-color:green;
  width: 3000px;
}

Answer 1

简单的答案是因为默认情况下，body max-width限制为视口的100％。

width：100％是视口或显示设备的最大宽度。在这种情况下，该div的宽度3000px超出了视口限制。因此100％赢得了工作。您可以为导航栏明确定义3000px。

但是如果你为身体定义宽度为3000px，那么Navbar也会扩展到相同的范围。 check this fiddle

<Gather>

Answer 2

导航栏继承父容器的宽度。使用width: 3000px ex- fullWidth添加另一个课程，如下所示： `

<nav class="navbar navbar-dark bg-dark fullWidth">
    <a class="navbar-brand" href="/">The Navbar</a>
</nav>
<div></div>
body {
  background-color: red;
}
div {
  display: inline-block;
  height: 20px;
  background-color:green;
  width: 3000px;
}
.fullWidth {
  width: 3000px;
}

`

但更简洁的方法是将父容器（本例中为body）宽度设置为3000px，这样也可以避免重复。

<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="/">The Navbar</a>
</nav>
<div></div>
body {
  background-color: red;
  width: 3000px;
}
div {
  display: inline-block;
  height: 20px;
  background-color:green;
  width: 100%;
}

Answer 3

在你的css中添加这一行

.navbar .navbar-dark{
 width: 100%;
}

检查一下，我认为这样可行