Twitter引導程序導航欄中的摺疊按鈕無法點擊

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 - 產生相同的不可點擊的按鈕。

Answer 1

將高位z-index置於按鈕上，例如，

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