navbar 버튼을 클릭하면 메뉴가 나타나지 않습니다.

Question

부트 스트랩을 사용하는 navbar에 비해이 html이 아래에 있습니다. 문제는 네비게이션 바를 여는 버튼을 클릭하면 네비게이션이 나타나지 않는다는 것입니다. jquery 및 부트 스트랩 jquery 파일을 가져 오는 중입니다.

어디에서 문제가 발생 했습니까?

작업 예 (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

코드를 실행 - 그리고 크롬의 관리자를 사용하여이 - 그것은 "포퍼는"정의되지 않은 말했다.

포퍼 라이브러리를 포함해야한다고 Google에 알립니다. 그러나이 기능은 부트 스트랩에서 번들을 사용하는 경우 이미 포함되어 있습니다.

으로 부트 스트랩 현재 ​​CDN 참조를 교체 https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js

문제를 해결할 수

는 - 여기에 작업 조각의 :

<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>

은 당신이 어떤 설명이 필요한 경우 알려줘 내가이 문제를 어떻게 해결했는지