2014-09-04 4 views
0

이것은 처음으로 부트 스트랩으로 도발적입니다. 다운로드 한 후 기존 웹 사이트에서 사용하려고했습니다. 지금까지 네비게이션 바를 제외하고는 위대한 일을했습니다. 모바일보기에서 드롭 다운 메뉴로 쇼를 클릭했을 때 이미지로 축소되는 예제를 보았습니다.탐색 메뉴가 모바일보기에 나타나지 않습니다.

<body id="top">  
    <div class="container"> 
     <nav class="navbar navbar-default" role="navigation"> 
      <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="##navbarCollapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <img src="images/logo.png" alt="Company Name" id="companyImageID" border="0"> 
       </div> 
       <div class="collapse navbar-collapse" id="navbarCollapse"> 
        <ul class="nav navbar-nav"> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">Careers</a></li> 
         <li><a href="#">Calendar</a></li> 
         <li><a href="#">Get Involved</a></li>       
        </ul> 
       </div> 
      </div> 
     </nav> 

    <!-- Here is form and footer --> 

    </div> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="../../include/bs/js/bootstrap.min.js"></script> 
</body> 

누구나 모바일보기에서 해당 메뉴를 가져 오는 방법을 알려줄 수 있습니까? 감사.

Edit1 : 현재 작동 방식은 창이 크기를 조정하면 탐색 링크가 로고 아래에 표시되고 결국 모바일보기에서 숨겨집니다.

답변

1

코드에 오타가있어 내비게이션 링크가 메뉴와 연결되는 것을 막습니다. 코드는 id가 navbarCollapse 인 것으로 식별됩니다. 링크가 ##navbarCollapse을 가리 키지 만 #navbarCollapse을 가리켜 야합니다.

여분의 # 만 제거하면 정상적으로 작동합니다.

+0

정류 된 오타가 여전히 동일합니다. – Aniruddha

+0

Bootply : [Demo Link] (http://www.bootply.com/PwHEtWxrbZ)에서 제대로 작동합니다. 모바일에있는 예를 보려면 작은 모바일 아이콘을 클릭하십시오. – Dan

+0

이상하게 들릴지 모르지만 bootply 데모는 작동하지만 내 코드에는 작동하지 않습니다. Chrome v36에서이 문제를 테스트하고 있습니다. – Aniruddha

관련 문제