2014-03-04 4 views
1

내 반응 형으로 부트 스트랩을 사용하고 있습니다. 모바일에서 볼 때 Nav가 버튼이되고 싶습니다. 작은 화면의 버튼이 표시되지만 클릭하면 슬라이드가 보이지 않습니다. 내 앵커가 내 코드임을 보여주세요.Twitter Bootstrap Nav 축소가 제대로 작동하지 않습니다.

<header class="navbar navbar-static-top marginTop"> 
    <div class=" col-md-6 "> 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <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="http://localhost/wordpress/wp-content/uploads/2014/03/logo.png" alt="" /> 
    </div> 

    <div class="col-md-6"> 
     <nav class="collapse navbar-collapse marginTopInNavBar"> 
      <ul class="nav navbar-nav parentUl text-center floatLeft" > 
       <li class="dropdown parentNavLi floatLeft"> 
        <a href="#" class="parentNavA floatLeft" id="first">Compare Prices</a> 
        <img src="http://localhost/wordpress/wp-content/uploads/2014/03/shadowNav.png" alt="" /> 
       </li> 

       <li class="dropdown parentNavLi floatLeft"> 
        <a href="#" data-toggle="dropdown" class="dropdown-toggle parentNavA floatLeft">Buying Guides</a> 
        <img src="http://localhost/wordpress/wp-content/uploads/2014/03/shadowNav.png" alt="" /> 
        <ul class="dropdown-menu childUl text-left floatLeft" id="menu1"> 
         <li class="childLi"><a href="#" class="childA">Guide 1</a></li> 
         <li class="divider"></li> 
         <li class="childLi"><a href="#" class="childA">Guide 2</a></li> 
         <li class="divider"></li> 
         <li class="childLi"><a href="#" class="childA">Guide 3</a></li> 
         <li class="divider"></li> 
         <li class="childLi"><a href="#" class="childA">Guide 4</a></li> 
        </ul> 
       </li> 
       <li class="dropdown parentNavLi floatLeft"> 
        <a href="#" class="parentNavA floatLeft">POS Type</a> 
         <img src="http://localhost/wordpress/wp-content/uploads/2014/03/shadowNav.png" alt="" /> 
       </li> 
       <li class="dropdown parentNavLi floatLeft"> 
        <a href="#" class="parentNavA floatLeft" id="last">Find Dealer</a> 
       </li> 
      </ul> 
     </nav> 
    </div> 
</header> 

감사합니다.

답변

7

상단이 시도 :

<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> 

을 또한, 닫는 태그 전에 페이지 하단이 추가 당신이 jQuery 라이브러리를 포함 할 때

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
+0

Let me k 지금 도움이된다면 – Peter

+0

도와 줘서 고마워 !!!! –

+0

btw .. 왜 내비게이션 토글 탐색 을 변경하고 data-target = "# bs-example-navbar-collapse-1"을 변경하십시오. –

6

탐색 붕괴 것에만 작동 귀하의 html 파일. index.html 및 기타 페이지에이 파일을 추가하십시오.

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
관련 문제