2014-09-03 231 views
0

这里是我的代码引导导航栏工作不正确

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 

    <div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
     <div class="container"> 
      <a href="index.html" class="navbar-brand">Brand</a> 

      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">|||</button> 

      <div class="collapse navbar-collapse navHeaderCollapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="index.html">Home</a></li> 
       </ul> 
      </div> 

     </div> 
    </div> 

    <h1>Hello, world!</h1> 


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"</script> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html> 

基本上切换工作不正常

归属链路其次是最多的品牌,而不是它的下面像它应该

我试图找到错误,但一直不成功

任何想法

+1

它正常工作对我来说:HTTP://www.bootply .COM/4ZlUXF3Bko。你确定你拥有所有的资产吗? – Aibrean 2014-09-03 16:26:18

+0

对我来说,它只是在品牌旁边提供了家庭链接。 – 2014-09-03 16:36:35

+0

为你做了它下面 – 2014-09-03 16:38:22

回答

3

尝试用“navbar-header”类包装品牌和按钮元素的HTML。

这里有一个演示:http://plnkr.co/edit/mGNYfCowMeMHi2qL7HO4

<body> 
<div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
    <a href="index.html" class="navbar-brand">Brand</a> 
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">|||</button> 
    </div> 
    <nav class="collapse navbar-collapse navHeaderCollapse" role="navigation"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li> 
      <a href="index.html">Home</a> 
     </li> 
     </ul> 
    </nav> 
    </div> 
</div> 
<h1>Hello, world!</h1> </body> 
+0

坚果 - 我10秒太慢=) – Raad 2014-09-03 16:37:35

+0

工作谢谢你,对不起我是14和n00b – 2014-09-03 16:49:26

1

我认为你缺少一个navbar-header部分,所以这样的事情应该更好地工作:

... 
<div class="navbar-header"> 
    <a href="index.html" class="navbar-brand">Brand</a> 
</div> 
... 

您可能需要调整的东西,以防止未来节包装到一个新的行,但否则切换应按预期工作。

0
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"</script> 

jquery.min.js”

修复它

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
0

如果你想有一个自上而下的菜单栏中,您应该使用 “侧边栏导航” 元素层次结构。

像这样:

<div<div class="sidebar-nav"> 
      <div class="sidebar-brand">Brand</div> 
      <div >Home</div> 
</div>