仅在 CSS3 和 Bootstrap 中更改 nav 属性的宽度属性答案

【问题标题】：Change width property only of nav property in CSS3 and Bootstrap仅在 CSS3 和 Bootstrap 中更改 nav 属性的宽度属性
【发布时间】：2014-04-10 02:43:33
【问题描述】：

我的 HTML 文件如下所示：

<body>
  <div class="container">
    <header>
      <nav class="nav navbar-default">
      </nav>
    </header>
    //main contents here
  </div>
</body>

所以，我的 HTML 有一个 .container，在其中我放了 .nav 以及主要内容。

我在 CSS3 上设置了以下属性 {width: 99%;} 在.container.

但是，当我在浏览器上打开它时，由于上述设置，不仅主要内容而且导航也缩小了 1%。我想知道的是，我怎样才能让container 缩小 1% 但导航除外？

我使用Stylus，我尝试编写以下代码：

.container
  header
    width: 100%

，但这不起作用，结果仍然显示在窗口上的 99%。
我也试过写&header来引用父.container，结果还是一样……为什么？

【问题讨论】：

标签： css twitter-bootstrap stylus

【解决方案1】：

你应该反过来做，比如..

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

这样，您不会全面修改引导网格结构（这可能会让您在路上遇到很多麻烦），而是将自定义宽度应用于您的一个元素（并且由于它是一个类，您可以将此相同的类添加到任何其他容器以对其进行修改。）

【讨论】：