Navbar Menu 접기 열지 않음

내 목표는 몇 개의 메뉴 링크가있는 웹 사이트 탐색 바를 작성하는 것입니다. 작은 물건에는 클릭 할 때 메뉴 링크가 접히는 메뉴 막대가 나타납니다.Navbar Menu 접기 열지 않음

YouTube 튜토리얼에 따라이를 수행하는 방법을 배우고 자습서의 코드와 내 코드를 여러 번 비교했지만 내 메뉴는 무너지기를 원하지 않습니다.

YouTube 튜토리얼의 코드를 내 Codepen으로 복사 할 때 축소 메뉴가 제대로 작동하기 때문에 문제가 부트 스트랩이로드되지 않았는지 확인할 수 있습니다.

누군가 내 코드를보고 내가 잘못한 점에 대해 힌트를 줄 수 있다면 많은 것을 고맙게 생각합니다.

<!--DOCTYPE html --> 
<head> 
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lemonada"> 
</head> 

<body> 
    <header> 
    <div class="navbar navbar-default navbar-inverse navbar-fixed-top"> 
     <div class="container"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a href="#" class="navbar-brand">Company Brand</a> 

     </div> 

     <div class="collapse navbar-collapse" id="navHeaderCollapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <a href="#">Menu 1</a> 
      </li> 
      <li> 
       <a href="#">Menu 2</a> 
      </li> 
      <li> 
       <a href="#">Menu 3</a> 
      </li> 
      <li> 
       <a href="#">Menu 4</a> 
      </li> 
      <li> 
       <a href="#">Menu 5</a> 
      </li> 
      <li> 
       <a href="#">Menu 6</a> 
      </li> 
      </ul> 

     </div> 

     </div> 
    </div> 
    </header> 

</body> 

<footer> 
</footer>

미리 감사드립니다. 이 질문에 전체 코드를 게시하는 경우 종류는 많은 것들을 잘못이있다

Rysio

출처

2017-01-10 Rysio

. 메뉴에 대한 사용자 정의 CSS가 있습니까? 부트 스트랩 만 사용하고 있습니까? 또한 HTML이 유효하지 않으므로 '

을 간주한다.

당신은 <html> 태그 내부에 <head> 및 <body> 태그를 포장해야합니다.
<body> 안에 <footer>을 가져 오십시오.
질문에 게시하지 않았지만 스크립트를 포함해야한다고 생각합니다. BootStrap 스크립트 전에 항상 jQuery 스크립트를 포함하십시오. bootstrap.js은 함수에 jQuery가 필요하기 때문에. 또한 그 코드가 정확한지 보여 그들에게 직전 </body>

여기에 내가 포함 한 CDN 스크립트와 CSS를 포함하는 것이 좋다.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lemonada"> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
</head> 
 

 
<body> 
 

 
<header> 
 

 

 
    <div class="navbar navbar-default navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     <a href="#" class="navbar-brand">Company Brand</a> 
 

 
     </div> 
 

 

 

 
     <div class="collapse navbar-collapse" id="navHeaderCollapse"> 
 

 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li> 
 
       <a href="#">Menu 1</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 2</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 3</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 4</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 5</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 6</a> 
 
       </li> 
 
      </ul> 
 

 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</header> 
 

 
<footer> 
 
</footer> 
 

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

 
</body> 
 
<html>

당신이 더 완전한 코드를 게시 할 수 있다면 당신이 다른 사람에게 도움이 될 것 Bootstrap-를 사용하는 것처럼 당신은 어떤 CSS, CSS 클래스의 사용 모습을 포함하지 않은

출처

2017-01-10 12:17:26 ab29007

@Rysio 문제가 해결되면 답을 수락하는 것을 잊지 마십시오. 내 대답의 왼쪽에있는 체크 표시 (오른쪽 기호)를 클릭하십시오. – ab29007

안녕하세요 KittyCat! 답변에 많은 감사드립니다. 내가 말한 변경 사항을 처리했는데 어쨌든 축소 메뉴가 작동하지 않습니다. CodePen을 사용하고 있기 때문에 부트 스트랩과 JQuerey 스크립트를 포함하지 않았으며 자동으로 거기에로드됩니다. 외부 코드를 복사하면 collapse 메뉴가 head 태그에 작동합니다 (스크립트를로드하지 않고). 코드가 당신에게 잘 보이나요? 오류가 발견되지 않았습니까? – Rysio

코드는 스크립트를 자동으로 포함하지 않습니다. 설정을 사용하여 추가해야합니다. 2 ~ 3 분 정도 기다리십시오. 나는 당신에게 보여주기 위해 여기에 코 펜을 추가 할 것입니다. – ab29007

Navbar Menu 접기 열지 않음

답변

관련 문제