Bootstrap切换导航不起作用

当我向右侧添加元素时，我的切换导航不起作用。当我缩放页面时，顶部右侧的菜单不会出现。如果右侧没有物品，则没有问题。我的html代码：Bootstrap切换导航不起作用

<nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapse" 
        data-toggle="collapse" data-target="#navbar" aria-expanded="false" 
        aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> <span 
         class="icon-bar"></span> <span class="icon-bar"></span> <span 
         class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#"><span>Broker</span>tain</a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse" 
       aria-expanded="false"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#brokerbattle">Brokerbattle</a></li> 
        <li><a href="#brokerbrain">Brokerbrain</a></li> 
        <li><a href="#1x2">1x2</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li> 
         <p class="btn"> 
          <a href="#" class="btn btn-default regist"><span 
           class="glyphicon glyphicon-user"></span>Registration</a> 
         </p> 
        </li> 
        <li> 
         <p class="btn"> 
          <a href="#" class="btn btn-default login"><span 
           class="glyphicon glyphicon-user"></span>Login</a> 
         </p> 
        </li> 
       </ul> 
       <form class="navbar-form navbar-right"> 
        <input type="text" class="form-control" 
         placeholder="Search brokertain..."> 
       </form> 
      </div> 
      <!--/.nav-collapse --> 
     </div> 
    </nav>

的jsfiddle：enter link description here

来源

2015-05-26 aks

导航崩溃是一个javascript函数。你能提供更多的信息吗？也许把你的JavaScript，CSS和HTML放在一个jsFiddle或一些类似的解决方案，以便任何人试图帮助看到整个关系。 – Nathan

我在编辑上添加了JSFiddle – aks

入住这DEMO它工作正常。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
        data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> <span 
        class="icon-bar"></span> <span class="icon-bar"></span> <span 
        class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">My Application</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right pull-left"> 

        <li><a href="#brokerbattle">Brokerbattle</a></li> 
      <li><a href="#brokerbrain">Brokerbrain</a></li> 
      <li><a href="#1x2">1x2</a></li> 



       <li> 
        <p class="btn"> 
         <a href="#" class="btn btn-default regist"><span class="glyphicon glyphicon-user"></span>Registration</a> 
        </p> 
       </li> 
       <li> 
        <p class="btn"> 
         <a href="#" class="btn btn-default login"><span class="glyphicon glyphicon-user"></span>Login</a> 
        </p> 
       </li>  
      </ul> 
       <form class="navbar-form navbar-right"> 
       <input type="text" class="form-control" placeholder="Search brokertain..."> 
</div> 
    </div></nav>

来源

2015-05-26 14:22:08 sheshadri

Bootstrap切换导航不起作用

回答

相关问题