2013-12-12 3 views
3

부트 스트랩에 대해 알아 봅니다. 작은 코드로 반응 형 메뉴를 만듭니다.navbar 붕괴가 부트 스트랩에서 작동하지 않습니다.

<head> 
    <meta charset="UTF-8"> 
    <title>Bootstrap</title> 
    <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a href="#" class="navbar-brand">Application Name</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Home</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript" src="JS/bootstrap.js"></script> 
</body> 
</html> 

내 질문은 왜 작은 브라우저에서 메뉴를 선택하려고하면 메뉴가 표시되지 않습니까? 몇 가지 이유를 말해 줄 수 있습니까? 감사합니다.

답변

14

내 geuss는 jQuery를로드하지 않았다는 것입니다. 헤더에서이 문제를 놓고 작동하는지 확인 :

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 

은 또한 난 그냥 jQuery 라이브러리 후, 헤더에 또한 부트 스트랩의 js 파일을로드하는 것이 좋습니다.

5

이는 bootstrap.js 스크립트가 jQuery를 사용하여 작동하기 때문일 가능성이 큽니다. bootstrap.js 전에 jQuery를 포함 해보십시오.

0

도움이 될지 모르지만 부트 스트랩 사이트에서 js 파일을 바닥 글에 링크하도록 알려줍니다.

내 functions.php 파일에 스크립트를 대기열에 추가해야하므로 워드 프레스를 내 머리글에 넣었습니다. 일단 jquery.js 파일과 bootstrap-min.js에 대한 링크를 바닥 글에 제거하면 탐색 버튼이 제대로 접히기 시작합니다.

+0

페이지 로딩 속도를 높이기 위해 사용되며 문제는 위의 이유 때문입니다. @DemPorkChops –

관련 문제