Eine navbar stackable machen (Bootstrap)

Ich frage mich, ob jemand mir helfen würde, meinen HTML-Code mit Bootstrap zu korrigieren, so dass die Navbar automatisch in ein Hamburger-Icon übergeht, wenn das Fenster minimiert ist.Eine navbar stackable machen (Bootstrap)

Hier ist mein HTML:

<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="https://www.hemsleyfraser.co.uk/" class="navbar-brand">Hemsley Fraser</a> 
    </div> 

    <div class="collapse navbar-collapse" id="navbar-collapse"> 

     <ul class="nav navbar-nav"> 
      <li><a href="home.html">Topics</a></li> 
      <li><a href="">About</a></li> 
      <li><a href="">Contact Us</a></li> 



     </ul> 
    </div> 
</div>

Vielen Dank! :)

Quelle

2016-07-19 Dom

Sind Sie js von Bootstrap hinzugefügt? –

Es gibt viele Tutorials, die Ihnen dabei helfen. Ich denke, diese SO Frage könnte unter anderen Ressourcen helfen - http://stackoverflow.com/questions/26317679/how-to-add-hamburger-menu-in-bootstrap – ArunGeorge

Es funktioniert gut bitte fügen Sie beide Bootstrap-Dateien und Jquery-Datei.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar"> 
 
<div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a href="https://www.hemsleyfraser.co.uk/" class="navbar-brand">Hemsley Fraser</a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="navbar-collapse"> 
 

 
     <ul class="nav navbar-nav"> 
 
      <li><a href="home.html">Topics</a></li> 
 
      <li><a href="">About</a></li> 
 
      <li><a href="">Contact Us</a></li> 
 

 

 

 
     </ul> 
 
    </div> 
 
</div>

Quelle

2016-07-19 10:42:50

Danke, dummer Fehler. – Dom

bitte upvote/akzeptieren, wenn es dir hilft. –

Eine navbar stackable machen (Bootstrap)

Antwort

Verwandte Themen