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