Wenn die Navigationsschaltfläche angeklickt wird, erscheint das Menü nicht

Question

Ich habe diese HTML unten relativ zu einer Navbar mit Bootstrap. Das Problem ist, dass beim Klicken auf die Schaltfläche zum Öffnen der Navigationsleiste die Navigationsleiste nicht angezeigt wird. Die jquery und bootstrap jquery Dateien werden importiert.

Wissen Sie, wo das Problem liegt?

Arbeitsbeispiel (http://jsfiddle.net/7fhs23bt/)

html:

<div class="container px-0"> 
    <nav class="navbar navbar-expand-md navbar-light bg-faded"> 

    <a class="navbar-brand" href="#">Logo</a> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
     <ul class="navbar-nav ml-auto d-flex align-items-center"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Item 1<span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Item 2</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Item 3</a> 
     </li> 
     </ul> 
    </div> 
    </nav> 
</div> 

Answer 1

Wenn Ihr Code ausgeführt wird - und den Inspektor von Chrome - es sagte "Popper" ist nicht definiert.

Eine schnelle Google sagt, dass Sie Popper-Bibliothek enthalten müssen - jedoch ist dies bereits enthalten, wenn Sie das Bundle von Bootstrap verwenden.

Ersetzen Sie Ihre aktuellen CDN Referenz mit Bootstrap https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js

die das Problem lösen wird - hier ist ein Arbeits Schnipsel:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js"></script> 
 
<div class="container px-0"> 
 
    <nav class="navbar navbar-expand-md navbar-light bg-faded"> 
 

 
    <a class="navbar-brand" href="#">Logo</a> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
     <ul class="navbar-nav ml-auto d-flex align-items-center"> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Item 1<span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Item 2</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Item 3</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</div>

Lassen Sie mich wissen, wenn Sie Klärung bedürfen auf wie ich das Problem behoben