Twitter의 부트 스트랩 Navbar에서 축소 버튼을 클릭 할 수 없습니다.

Question

내 탐색 모음이 축소되어 링크와 드롭 다운이 올바르게 숨겨져 있고 표시 할 버튼이 표시되지만 클릭 할 수는 없습니다. 그때 부트 스트랩 페이지에 코드를 내 네비게이션 바 교체 경우 어딘가에 내 HTML에 문제가 있으므로 부트 스트랩 예를 표시 줄 및 축소 버튼을

내 코드입니다 .. 제대로 수행

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="container-fluid"> 
    <div class= "navbar-header"> 
    <button type="button" class="navbar-toggle" 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> 
    <div class="navbar-link nav brand"> 
     <a href="/">MarcB</a> 
    </div> 
    </div> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
    <li><%= link_to "Blog", posts_path %></li> 
    <li><%= link_to 'Contact', contact_path %> </li> 
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
    <% if current_user %> 
     <li> <%= link_to "Sign Out", logout_path %> </li> 
     <p class="navbar-text navbar-right signed-in"> Signed in as: <%= current_user.name %> </p> 
    <% else %> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Log in <b class="caret"></b></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><%= link_to 'Log in with Facebook', "/auth/facebook" %></li> 
      <li><%= link_to 'Log in with LinkedIn', "/auth/linkedin" %></li> 
      <li><%= link_to 'Log in with GitHub', "/auth/github" %></li> 
      <li><%= link_to 'Log in with Google+', "/auth/gplus" %></li> 
      </ul> 
     </li> 
    <% end %> 
    </ul> 
    </div> 
</div> 

난간에서 생성 된 HTML은 (로그인하지 않은)은

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="container-fluid"> 
    <div class= "navbar-header"> 
    <button type="button" class="navbar-toggle" 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> 
    <div class="navbar-link nav brand"> 
     <a href="/">MarcB</a> 
    </div> 
    </div> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
    <li><a href="/posts">Blog</a></li> 
    <li><a href="/contact">Contact</a> </li> 
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Log in <b class="caret"></b></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="/auth/facebook">Log in with Facebook</a></li> 
      <li><a href="/auth/linkedin">Log in with LinkedIn</a></li> 
      <li><a href="/auth/github">Log in with GitHub</a></li> 
      <li><a href="/auth/gplus">Log in with Google+</a></li> 
      </ul> 
     </li> 
    </ul> 
    </div> 
</div> 

,

두 번째 ul도 드롭 다운으로 주석 처리했습니다. 동일한 unclickable 버튼을 생성합니다.

Answer 1

높은 z-index을 버튼에 올려 놓습니다.

button { 
    position: relative; 
    z-index: 100000; 
}