Css 当主体宽度超过100%时，如何使元素占据整个宽度？

这适用于大多数浏览器，因为它具有引导响应能力。但我在检查旧浏览器时发现了这个

宽元素似乎正在将主体推出。好吧，那为什么导航栏不占据整个宽度呢

。 “指向JSFIDLE的链接必须附带代码”：

身体{
背景色：红色；
}
div{
显示：内联块；
高度：20px；
背景颜色：绿色；
宽度：3000px；
}

在css中添加此行

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

---

选中此选项我认为这会起作用。简单的答案是，默认情况下，主体最大宽度限制为视口的100%

宽度：100%是视口或显示设备的最大宽度。在这种情况下，该div的宽度3000px远远超出视口限制。因此，100%不起作用。您可以为导航栏显式定义3000px

但如果为主体定义宽度3000px，则导航栏也会扩展为相同的宽度。

---

导航栏继承父容器的宽度。添加另一个宽度为3000px的类，如下所示： `

---

你包括bootstrap.js了吗？不，我不想包括bootstrap.js。但我只是尝试了一下，但没有成功：删除

div{width:3000px；}

，但这就是模拟拥有广泛内容的原因。这也是我一开始的想法，但我认为没有运气。一个小小的JavaScript代码片段可能会得到它，但我打赌会产生更多的问题。我想我会忽略这个。除了ios 6和5.1上的safari之外，它在我尝试的所有浏览器上都非常棒。ios 6于2012年推出。所以这只是一个小问题，而且只在一些旧浏览器上存在。

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

body {
  background-color: red;
  width:3000px;
}

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

<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%;
}