简体   繁体   中英

bootstrap nav-bar collapse icon not triggering

I have made a simpel nav-bar with bootstrap(i copied from a working template). I've included the latest bootstrap.min.js and an unmodified css from bootwatch.

<div class="navbar navbar-default navbar-fixed-top" style="z-index:2;">
      <div class="container">
        <div class="navbar-header">
          <a href="../" class="navbar-brand"></a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">
          <ul class="nav navbar-nav navbar-right">
                      <li>
              <a href="../help/">Start</a>
            </li>
            <li>
              <a href="../help/">Leverantörer</a>
            </li>
          </ul>
        </div>
      </div>
    </div>  

However the button won't trigger the menu when i run it on mobile. What have i done wrong?

Please check this JSFIDDLE link. The same code which you shared seems to be working fine.

I have included the css and JS of bootstrap from CDN.

 <div class="navbar navbar-default navbar-fixed-top" style="z-index:2;"> <div class="container"> <div class="navbar-header"> <a href="../" class="navbar-brand"></a> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse" id="navbar-main"> <ul class="nav navbar-nav navbar-right"> <li> <a href="../help/">Start</a> </li> <li> <a href="../help/">Leverantörer</a> </li> </ul> </div> </div> </div> 

JSFIDDLE

Seems like you have missed adding the bootstrap.js file.

so just before closing body tag add this line.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body> > <!-- please note I have added it just before closing body tag -->

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM