2016-08-30 4 views
1

부트 스트랩 탐색이 예상대로 축소되었지만, 햄버거를 클릭 할 때 드롭 다운이 표시되지 않습니다. JSFiddle 예제 here - 부트 스트랩/3.3.7/css/bootstrap.min.css부트 스트랩/3.3.7/js/bootstrap.min.js을 내 외부 리소스로 사용합니다.부트 스트랩 탐색 모음 드롭 다운이 열리지 않음

단추의 데이터 대상이 축소 된 탐색을 포함하는 div의 ID와 일치해야한다는 다른 내용을 발견했습니다. 필자의 경우 data-target = "# page-nav-tabs"와 내 div id = "page-nav-tabs". 하지만 여전히 작동하지 않습니다 .... 도와주세요!

업데이트 : 축소 된 메뉴에 대한 수정 사항이 열리지 않음 - jquery 스크립트를 포함해야 함. 이제 "Create New"드롭 다운이 작동하지 않는 문제가 있습니다.

<section id="right-pane-wrapper"> 
    <section id="secondary-nav" class="row"> 

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#page-nav-tabs" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 

    <div class="collapse navbar-collapse" id="page-nav-tabs"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Summary</a></li> 
     <li class="active"><a href="#">Claim Tree</a></li> 
     <li><a href="#">Assignment</a></li> 
     <li><a href="#">Reserve Summary</a></li> 
     <li><a href="#">Related Claims</a></li> 
     <li><a href="#">Indicators</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
      <button type="button" class="btn btn-default dropdown-toggle">Create New <span class="caret"></span></button> 
      <ul class="dropdown-menu"> 
       <li><span><a id="addNotification" href="#"><span>Reminder</span></a></span></li> 
       <li><span><a id="addMessage" href="#"><span>Message</span></a></span></li> 
       <li><span><a href="#"><span>Letter</span></a></span></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

    </section> 
</section> 

답변

0
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
<section id="right-pane-wrapper"> 
    <section id="secondary-nav" class="row"> 

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#page-nav-tabs" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 

    <div class="collapse navbar-collapse" id="page-nav-tabs"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Summary</a></li> 
     <li class="active"><a href="#">Claim Tree</a></li> 
     <li><a href="#">Assignment</a></li> 
     <li><a href="#">Reserve Summary</a></li> 
     <li><a href="#">Related Claims</a></li> 
     <li><a href="#">Indicators</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 

     <li class="dropdown"> 
      <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Create New <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><span><a id="addNotification" href="#"><span>Reminder</span></a></span></li> 
       <li><span><a id="addMessage" href="#"><span>Message</span></a></span></li> 
       <li><span><a href="#"><span>Letter</span></a></span></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

    </section> 
</section> 
</body> 
</html> 

확인이 하나

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Create New <span class="caret"></span></button> 
과의 지금

작업하거나 교체 버튼 라인