Html 如何粘贴盒装导航条

我用词缀使固定我的导航栏滚动时

但当滚动导航栏无法正常工作时

我使用

给标题网站（一个中心内容）一个框装外观

若我使用不带容器的标题，标题和菜单将适合屏幕两侧。在这种情况下，粘贴的导航条可以很好地工作，以相同的方式安装屏幕（宽度为1391px）

但是我使用的是

。附加的导航栏超出了屏幕，因为它的宽度也达到了1391px。就像是一个侧面对侧面的网站。它不适合容器宽度

你知道怎么解决吗

或

是不是bootstrap affix仅针对拉伸站点而非盒装站点进行设计

这是我的导航HTML

<header class="container">
    <nav id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="222">
          <div class="container-fluid">
          <div class="navbar-header"><a class="navbar-brand" href="#">Home</a>
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
              </button>
          </div>
          <div class="collapse navbar-collapse navbar-menubuilder">
              <ul class="nav navbar-nav navbar-left">
                  <li class="dropdown" class="dropdown"><a href="3" class="dropdown-toggle" data-toggle="dropdown">Nosotros <b class="caret"></b></a>
                      <ul class="dropdown-menu" role="menu">
                          <li><a href="#">Misión, Visión y Objetivos</a>
                          </li>                      
                      </ul>
                  </li>                      
              </ul>
          </div>
      </div>
    </nav>
</header>

---

看一看，这和我身上发生的事情很相似。将结果屏幕变小变大，看看在没有代码的情况下会发生什么，我只能假设代码是什么样子

使用twitter引导的navbar fixed navbar示例，您需要更改.navbar fixed top right和left值。使用0将其从一侧设置为另一侧

@media (min-width: 768px) {
    .navbar-fixed-top {
        position: fixed;
        right: auto;
        left: auto;
    }
}

之后，为了使它们对齐，您必须覆盖引导的边距（例如，您右边的导航栏有边距，等等）

---

查看小提琴：

在更大的屏幕上，您希望#nav.sex跟随容器大小。在左侧和右侧使用0，将容器用作向导，“拉伸”它的宽度仅与容器的宽度相同

在较小的屏幕上，容器现在的宽度为“auto”，在固定位置上，它将从左向右延伸。使用20px的填充（由引导css使用），您可以将其重新对齐到标头容器的长度

#nav.affix {
    position: fixed;
    top: 0;
    left:0;
    right:0;
}

@media (max-width: 767px)  { /*controls on smaller screen*/
    #nav.affix {
        left:20px; /*20px to follow bootstrap body padding */
        right:20px;
    }
}

---

Fiddle:

请将您的工作文件上传到JSFIDdle上。对不起，我试过了，但粘贴在那里不起作用，但这里（）有一个例子，请看一看。使结果屏幕变大变小，看看发生了什么我没有使用导航栏固定顶级。请看一下我的代码。你在词缀课上试过我的其他答案了吗？

#nav.affix {
    position: fixed;
    top: 0;
    left:0;
    right:0;
}

@media (max-width: 767px)  { /*controls on smaller screen*/
    #nav.affix {
        left:20px; /*20px to follow bootstrap body padding */
        right:20px;
    }
}