Bootstrap's zusammenklappbare Navbar

Question

Mein zusammenklappbares Bootstrap-Menü funktioniert nicht. Ich kann nicht herausfinden, wo mein Problem ist?

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#top">the company</a> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

    </div> 
    <div class="menu" id="#myNavbar" class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav navbar-right" data-toggle="collapse" data-target="myNavbar"> 
     <li class="scrollable"><a href="#about" class="active" class="scrollable">About me</a></li> 
     <li class="scrollable"><a href="#portfolio">Portfolio</a></li> 
     <li class="scrollable"><a href="#contact">Contact Me</a></li> 
    </ul> 
    </div> 
    </div> 
</nav> 

Answer 1

Sie haben doppelte Attribute für Klasse in mehreren divs sowie mehrere data-toggle="collapse" & data-target="myNavbar".

Auch Ihre Ziel-ID die # darin hat, sollte es nicht: id="#myNavbar"id="myNavbar"

Validate Ihre HTML und auf die beziehen sich auf die Docs

Arbeitsbeispiel beziehen sollte:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#top">the company</a> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <div id="myNavbar" class="collapse navbar-collapse menu"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="active scrollable"><a href="#about">About me</a> 
 
     </li> 
 
     <li class="scrollable"><a href="#portfolio">Portfolio</a> 
 
     </li> 
 
     <li class="scrollable"><a href="#contact">Contact Me</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</nav> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

Das Problem war, mit:

• Ihr Zusammenbruch navbar Hierarchie.
• Das div, wo Sie menu Klasse verwendet haben.
• Syntax

• Der Anker-Tag: <a class="navbar-brand" href="#top">the company</a> sollte nach button Tag kommen.

• Und die Menü-Klasse sollte zusammen mit anderen Klassen verwendet werden: <div id="myNavbar" class="menu collapse navbar-collapse">, statt <div class="menu" id="#myNavbar" class="collapse navbar-collapse">

• <div id="#myNavbar" soll geändert werden, um <div id="myNavbar". Entfernen Sie die #, Sie brauchen es nicht beim Hinzufügen von id zum Div.

• Und letzte Ausgabe: Verwenden Sie nicht data-toggle="collapse" data-target="myNavbar"> wieder in der ul Tag. Verwenden Sie einfach <ul class="nav navbar-nav navbar-right">

Versuchen Sie den Code-Schnipsel unten laufen und nicht vergessen Bootstrap und jQuery Bibliotheken in Ihre Webseite aufzunehmen. Prost!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#top">the company</a> 
 
    </div> 
 
    <div id="myNavbar" class="menu collapse navbar-collapse"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li class="scrollable"><a href="#about" class="active" class="scrollable">About me</a></li> 
 
     <li class="scrollable"><a href="#portfolio">Portfolio</a></li> 
 
     <li class="scrollable"><a href="#contact">Contact Me</a></li> 
 
    </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>