引导导航栏工作不正确

问题描述：

<!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>

基本上切换工作不正常

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

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

任何想法

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

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

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

答

尝试用“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>

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

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

答

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

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

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

答

<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>

答

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

像这样：

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

引导导航栏工作不正确

相关推荐