부트 스트랩 Navbar 드롭 다운 메뉴가 Codepen.io에서 삭제되지 않음

Question

codepen.io에서 작업 - 클릭시 부트 스트랩 드롭 다운 메뉴가 아래로 확장되지 않음.

HTML :

<nav class="navbar navbar-toggleable-md navbar- light bg-faded"> 
 
    <div class="container-fluid"> 
 
     <button class="navbar-toggler hidden-lg- 
 
     up" style="float:right" type="button" 
 
     data-toggle="collapse" data- 
 
     target="#navbarNavDropdown" aria- 
 
     controls="navbarNavDropdown" aria- 
 
     expanded="false" aria-label="Toggle 
 
     navigation"> 
 
     <span class="navbar-toggler-icon"> 
 
     </span> 
 
     </button> 
 
     <a class="navbar-brand" href="#"><img 
 
    src="https://s21.postimg.org/7jyged8c7/logo_words_transparent.png" alt="logo" width= "200px" height= "80px"></a> 
 
<div class="collapse navbar-collapse" id="navbarNavDropdown"> 
 
<ul class="navbar-nav"> 
 
<li class="nav-item active"> 
 
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
</li> 
 
<li class="nav-item"> 
 
    <a class="nav-link" href="#">Our Story</a> 
 
</li> 
 
<li class="nav-item dropdown"> 
 
    <a class="nav-link dropdown-toggle" href="http://example.com" data-toggle= "dropdown"> 
 
    Web Sites 
 
    <span class="caret"></span></a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#">Business</a></li> 
 
    <li><a href="#">e-Commerce</a></li> 
 
    <li><a href="#">Web Applications</a></li> 
 
    </ul> 
 
</li> 
 
<li class="nav-item dropdown"> 
 
    <a class="nav-link dropdown-toggle" href="http://example.com"> 
 
    Social Media 
 
    <span class="caret"></span> 
 
    </a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a class="dropdown-item" href="#">Social Marketing</a></li> 
 
    <li><a class="dropdown-item" href="#">Content Management</a></li> 
 
    <li><a class="dropdown-item" href="#">Communities and Influencers</a></li> 
 
    <li><a class="dropdown-item" href="#">Social Intelligence</a></li> 
 
    </ul> 
 
</li> 
 
<li class="nav-item dropdown"> 
 
    <a class="nav-link dropdown-toggle" href="http://example.com"> 
 
    Digital Marketing 
 
    <span class="caret"></span></a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a class="dropdown-item" href="#">SEO</a></li> 
 
    <li><a class="dropdown-item" href="#">AdWords</a></li> 
 
    <li><a class="dropdown-item" href="#">Email Marketing</a></li> 
 
    </ul> 
 
</li> 
 
    <li class="nav-item dropdown"> 
 
    <a class="nav-link dropdown-toggle" href="http://example.com"> 
 
    User Experience 
 
    <span class="caret"></span> 
 
    </a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a class="dropdown-item" href="#">Interface Development</a></li> 
 
    <li><a class="dropdown-item" href="#">User Analysis</a></li> 
 
    </ul> 
 
</li> 
 
<li class="nav-item dropdown"> 
 
    <a class="nav-link dropdown-toggle" href="http://example.com"> 
 
    Graphic Design 
 
    <span class="caret"></span> 
 
    </a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a class="dropdown-item" href="#">Logo Design</a></li> 
 
    <li><a class="dropdown-item" href="#">Printed Media</a></li> 
 
    <li><a class="dropdown-item" href="#">Printing Support</a></li> 
 
    </ul> 
 
</li> 
 
<li class="nav-item dropdown"> 
 
    <a class="nav-link dropdown-toggle" href="http://example.com"> 
 
    Training 
 
    <span class="caret"></span> 
 
    </a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a class="dropdown-item" href="#">DIY Wordpress</a></li> 
 
    <li><a class="dropdown-item" href="#">DIY Social Marketing</a></li> 
 
    <li><a class="dropdown-item" href="#">DIY SEO</a></li> 
 
    </ul> 
 
</li> 
 
<li class="nav-item"> 
 
    <a class="nav-link" href="#">Portfolio</a> 
 
</li> 
 
<li class="nav-item"> 
 
    <a class="nav-link" href="#">Blog</a> 
 
</li> 
 
<li class="nav-item"> 
 
    <a class="nav-link" href="#">Contact</a> 
 
</li> 
 
</ul> 
 
    </div> 
 
</nav>

enter link description here

내가 본 다른 질문은 삽입 스크립트의 순서에 대한 그 이야기를 물었다하지만 난이 사용 codepen.io을 수행하는 방법을 확실하지 오전 .

도움 주셔서 감사합니다.

Answer 1

당신은 코데펜보기에서 바보 같은 실수를 저질 렀습니다. bootstrap에는 jquery에 많은 의존성이 있습니다.
bootstrap.js을 먼저로드 한 다음 jquery.js을 입력했으나 jquery.js을 먼저 입력 한 다음 bootstrap.js이어야합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 

Answer 2

당신이 드롭 다운으로 사용하는 경우 아래

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

둘째 <a></a>처럼 추가하지 않을 경우 코드에 CDN 서비스를 추가하는 최초의 필요성, 돈 '
당신은 아래의 올바른 순서를 확인하실 수 있습니다 t href = "모든 링크"추가

감사합니다. 제안한 태그를 삽입했지만 위쪽으로 이동 한 메뉴 항목이 로고와 겹치고 href = ""를 제거한 후에도 메뉴 항목이 작동하지 않았습니다. 도움이된다면 CODEPEN.IO를 사용하고 있습니다.