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切換導航不起作用

回答

相關問題