2016-10-02 3 views
1

내 개인 페이지를 다시 쓰려고하는데 Navbar에 문제가 있습니다. 내가 처음 만들었을 때 나는 하나도 만들지 않았고, 이제는 하나를 추가하고 전체 레이아웃을 변경하려고합니다. 나는 잡석을 들고 모든 것이 제자리에 있으며 화면이 작을 때 아이콘이 나타나면 붕괴되지 않습니다. 나는 부트 스트랩으로 지침을 따라 갔다. 그리고 나는 그것에 능숙 해 지려고 노력하고있다. 그러나 그것이 효과가없는 이유를 발견 할 수 없다. 내 코드 codepen.io내 navbar 토글이 접히지 않습니다

<div class="container-fluid"> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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> 
     <a class="navbar-brand" href="#">PORTFOLIO</a> 
    </div> 

    <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#slide2">Home <span class="sr-only"></span></a></li> 
     <li><a href="#slide2">About</a></li> 
     <li><a href="#slide3">Projects</a></li> 
     <li><a href="#slide4">Contact</a></li> 
     </ul> 
    </div> 

    </div> 
</nav> 

+0

당신은 일련 필요 첫 번째 jquery.js처럼 srcipt의 CDN 다음 <스크립트 SRC = "bootstrap.min.js <="JQuery와-3.1.0.min.js "스크립트 SRC> bootstrap.min.js "> –

답변

0

코드가 완벽합니다. 당신이 틀린 유일한 것은 jQuery 앞에 Bootstrap을 포함시키는 것입니다.

This은 주문 번호를 jQuery으로 먼저 변경 한 코드의 작업 포크입니다. 외부 리소스 (CSS 또는 JS)가 포함 된 펜 설정을 확인하여 순서를 변경할 수 있습니다.

+0

감사합니다. 나는 그 명령이 거기서 중요하다는 것을 기억했다. – riv

0
JQuery와, 닫기 신체하기 전에 코드의 끝에서 JQuery와 CDN에서이를 추가하려고 작동하지 않는

:

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>

0

Jquery가 작동하지 않는 것 같습니다. html 문서의 머리 부분에 다음 내용을 추가하십시오.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
관련 문제