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

时间:2014-09-22 15:03:08

标签: jquery html css twitter-bootstrap

我尝试自定义一个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>

如您所见,点击折叠的方块时。它花费在内部&#39;导航栏。

我怎样才能像引导网站上给出的示例那样扩展它:

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

编辑:

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

案件已关闭我猜。

2 个答案:

答案 0 :(得分:1)

只需将您的折叠菜单移到.container

之外

这是工作副本 - &gt; JSFIDDLE

答案 1 :(得分:0)

我更改了原始代码,删除了您不需要的内容并添加了pull-left类,现在它看起来像这样:link