我的 HTML 文件如下所示:
<body>
<div class="container">
<header>
<nav class="nav navbar-default">
</nav>
</header>
//main contents here
</div>
</body>
所以，我的 HTML 有一个 .container，我在里面放了 .nav 以及主要内容。
然后我在 CSS3 上设置了以下属性
{宽度:99%;}
在 .container 上。
但是，当我在浏览器上打开它时，由于上述设置，不仅主要内容而且导航都缩小了 1%。我想知道的是，如何使 container 缩小 1% 但导航除外？
我使用 Stylus，并尝试编写以下代码:
.container
header
width: 100%
，但这不起作用，结果在窗口上保持 99%。
我也试过写&header来引用父级.container，结果还是一样...为什么？
最佳答案
你应该反过来做，比如..
<nav class="nav navbar-default">
<div class="container">
//content
</div>
</nav>
这样，您的 <nav>不会受到宽度变化的影响，所有内部内容都会受到影响。
如果您绝对需要按照您构建它的方式使用它...请执行以下操作:
<div class="container">
<header>
<nav class="nav navbar-default">
<div class="container container-width">
//content
</div>
</nav>
</header>
</div>
.container-width {
width: 99%;
}
这样一来，您就不会全面修改 Bootstrap 网格结构(这可能会给您带来很多麻烦)，而是将自定义宽度应用于您的一个元素(并且由于它是一个类，您可以将这个相同的类添加到任何其他容器以对其进行修改。)
关于css - 仅更改 CSS3 和 Bootstrap 中导航属性的宽度属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22977728/