Menü kollabiert nicht in navbar-Toggle-Bootstrap

Mit HTML5 CSS3 Bootstrap und jqueryMenü kollabiert nicht in navbar-Toggle-Bootstrap

Bootstrap navbar Menü nicht kollabiert, wenn Browser verkleinert.
Ich habe die html geprüft und ich bin bisher jquery Version

durch viele andere Beiträge für Ideen gesucht mit und versuchte, schon eine Menge Sachen, aber keine Freude

Ich hoffe jemand

helfen kann

-Code wie folgt

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
<div id="navDiv" class="navDiv"> 
    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> 

     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navDiv" 
         aria-expanded="false"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <!--<a class="navbar-brand" href="about.html">About the project</a>--> 
      </div> 
      <div class="navbar-header navDiv"> 
       <!--<a class="navbar-brand" href="#"><img src="images/revive_logo_small.png"></a>--> 
      </div> 
      <div id="myNavbar"> 
      <ul class="nav navbar-nav"> 
       <li><a class="nav-item nav-link active" href="#">| Home |</a></li> 
       <li><a class="nav-item nav-link" href="#">| Hypno |</a></li> 
       <li><a class="nav-item nav-link" href="#">| NLP |</a></li> 
       <li><a class="nav-item nav-link" href="#">| Coaching |</a></li> 
       <li><a class="nav-item nav-link" href="#">| About June |</a></li> 
       <li><a class="nav-item nav-link" href="#">| Contact |</a></li> 
      </ul> 
      </div> 
     </div> 
    </nav> 
</div> 
<div id="content"> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <div class="row"> 
       <div class="col-sm-5"> 
        <img src="images/revive_logo_medium.png" class="me" alt="June"> 
        <br> 

       </div><!-- end 4 column div --> 
       <div class="col-sm-7"> 
       </div><!-- end 8 column div --> 
      </div> 
     </div><!-- end full width div --> 
    </div> 
</div><!--</ content div> --> 


<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

</body> 


</html>

Quelle

2017-11-08 panda_mc

Sie haben eine Klasse (class = "Zusammenbruch navbar-Zusammenbruch") auf Ihrem div-Container 'div id = "myNavbar"' hinzuzufügen. Auch müssen Sie Ihre Daten ändern-toggle zu "#myNavbar", weil dieser Div-Container Ihre Menüpunkte enthält. Außerdem müssen Sie bootstrap.js als Ressource hinzufügen.

Es ist wie auszusehen hat:

<div id="navDiv" class="navDiv"> 
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> 

    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" 
        aria-expanded="false"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <!--<a class="navbar-brand" href="about.html">About the project</a>--> 
     </div> 
     <div class="navbar-header navDiv"> 
      <!--<a class="navbar-brand" href="#"><img src="images/revive_logo_small.png"></a>--> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
      <li><a class="nav-item nav-link active" href="#">| Home |</a></li> 
      <li><a class="nav-item nav-link" href="#">| Hypno |</a></li> 
      <li><a class="nav-item nav-link" href="#">| NLP |</a></li> 
      <li><a class="nav-item nav-link" href="#">| Coaching |</a></li> 
      <li><a class="nav-item nav-link" href="#">| About June |</a></li> 
      <li><a class="nav-item nav-link" href="#">| Contact |</a></li> 
     </ul> 
     </div> 
    </div> 
</nav>

JSFiddle link

Quelle

2017-11-08 19:39:17

Vielen Dank für das, kollabiert die navbar jetzt aber als ich die 3bar Menütaste klicken sie verschwindet, irgendwelche Ideen? –

Haben Sie den obigen Code verwendet? Auf JSFiddler funktioniert es und die 3bar-Menü-Taste verschwindet nicht –

Bekam es diesmal, großer Dank! –

Menü kollabiert nicht in navbar-Toggle-Bootstrap

Antwort

Verwandte Themen