jquery - Bootstrap 导航栏未按预期扩展(在导航栏底部)

Question

我尝试自定义 Bootstrap 导航栏，现在展开菜单时遇到问题。

Fiddle

<div class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" rel="home" href="#" title="halp">Help ?</a>
      <!-- Placeholder for the collapsed menu -->
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed pull-left">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- the collapsing menu -->
    <div class="collapse navbar-collapse">
      <!-- pull-right keeps the drop-down in line -->
      <ul class="nav navbar-nav">
        <li class="menu active"><a href="#">Home</a></li>
        <li class="menu"><a href="#about">About</a></li>
        <li class="menu"><a href="#contact">Contact</a></li>
      </ul>
    </div> <!--/.nav-collapse -->

  </div>
</div>

如您所见，单击折叠的正方形时。它在导航栏“内部”花费。

我怎样才能让它像 bootstrap 网站上给出的例子一样扩展:

http://getbootstrap.com/examples/navbar-static-top/

编辑:

我遇到了同样的问题:在尝试了 Flopet17 所做的更改后(顺便说一句，谢谢)，问题是由标题 div(第 3 行)中的“向左拉”类引起的。当我删除它时，它一切正常。

我想这个案子已经结案了。

Answer 1

只需将折叠菜单移到 .container 之外。

这是工作副本 --> JSFIDDLE