부트 스트랩 navbar 붕괴

-3

부트 스트랩 jumbotron 예제에서 얻은 내 부트 스트랩 navbar가 축소되지 않습니다. 그것이 내가 올바른 자바 스크립트, CSS 또는 JQuery 링크 pls 나에게 맞는 것들을 보내지 못한다면. 나는 navbar 물건에 다소 새로운 것이므로 정말 도움이 필요하다. 고맙습니다!부트 스트랩 navbar 붕괴

<nav class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav-collapse" aria-expanded="false" aria-controls="navbar"> 
     <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="#">Project name</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li class="dropdown-header">Nav header</li> 
      <li><a href="#">Separated link</a></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="../navbar/">Default</a></li> 
     <li><a href="./">Static top <span class="sr-only">(current)</span></a></li> 
     <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav>

출처

2016-11-05 Marcus Pro

토글 버튼이 작동하지 않거나 모바일 버전으로 접히지 않는다는 것을 의미합니까? – ZimSystem

귀하의 코드가 나를 위해 제대로 작동하는 것 같다 : 다음은 내 코드입니다. 단지 자바 스크립트 파일이 누락되었음을 나타냅니다. 좀 더 정확히 말하자면 부트 스트랩과 jQuery JS 파일이 누락되었습니다. <body> 안에 두 파일을 모두 추가하기 만하면됩니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

(그게 다야, 부트 스트랩은 단순히 jQuery를 필요), 그렇지 않으면 부트 스트랩이 작동하지 않습니다 먼저 jQuery를 포함 명심하십시오.

Here's 귀하의 코드입니다. 방금 마크 업을 복사하고 Bootstrap + jQuery를 추가했습니다.

편집

난 당신이 wront data-target을 사용하고 통지를하지 않았다. @Asifuzzaman Redoy에게 감사드립니다. data-target을 다음으로 변경하십시오.

data-target=".navbar-collapse"

필자가 그에 따라 업데이트했습니다.

출처

2016-11-05 17:18:30 Aer0

감사합니다. 이것은 정말로 도움이되었습니다 –

헤이 그냥 변경하려면 data-target=".nav-collapse"

data-target=".navbar-collapse"에 당신이

검사를 붕괴 아래의 바이올린

Navbar Collapse Fiddle

를 권리 클래스를 대상으로하지 않습니다 작동하고 CDN을 추가해야합니다 참고 번호

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

출처

2016-11-05 17:19:44

대단히 감사합니다! 그것은 효과가있다! –

토글 데이터 토글 속성을 .navbar-collapse 또는 #navbar로 변경하십시오. 이렇게하면됩니다.

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

토글 버튼을 통해 올바른 클래스 또는 요소 ID를 타겟팅하지 않았습니다.

출처

2016-11-05 17:29:21

부트 스트랩 navbar 붕괴

답변

관련 문제