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>

并且从rails生成的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;
}

Twitter引导程序导航栏中的折叠按钮不可单击

1 个答案: