Twitter引导程序导航栏中的“折叠”按钮不可点击 [英] Collapse button in Twitter bootstrap navbar not clickable
本文介绍了Twitter引导程序导航栏中的“折叠”按钮不可点击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我的导航栏折叠链接并下拉正确隐藏，并显示它们的按钮显示，但不可点击。
如果我用引导页面上的代码替换我的导航栏，那么引导程序示例栏和折叠按钮就可以正确执行，所以这对我的HTML来说是个问题。
我的代码是：
< nav class =navbar navbar-default navbar-fixed-toprole =导航>
< div class =container-fluid>
< div class =navbar-header>
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =＃bs-example-navbar-collapse-1>
< span class =sr-only>切换导航< / 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-collapseid =bs-example-navbar-collapse-1>
< ul class =nav navbar-nav>
< li><％= link_toBlog，posts_path％>< / li>
< li><％= link_to'Contact'，contact_path％> < /锂>
< / ul>
< ul class =nav navbar-nav navbar-right>
<％if current_user％>
< li> <％= link_to注销，logout_path％> < /锂>
< p class =navbar-text navbar-right signed-in>登录为：<％= current_user.name％> < / p为H.
<％else％>
< li class =dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdown>登录< b class =caret>< / b>< / a>
< ul class =dropdown-menurole =menu>
< li><％= link_to'使用Facebook登录'，/ auth / facebook％>< / li>
< li><％= link_to'使用LinkedIn登录'，/ auth / linkedin％>< / li>
< li><％= link_to'使用GitHub登录'，/ auth / github％>< / li>
< li><％= link_to'使用Google+登录'，/ auth / gplus％>< / li>
< / ul>
< / li>
<％end％>
< / ul>
< / div>
< / div>
以及从轨道生成的HTML （未登录）
< nav class =navbar navbar-default navbar-fixed-toprole =导航>
< div class =container-fluid>
< div class =navbar-header>
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =＃bs-example-navbar-collapse-1>
< span class =sr-only>切换导航< / 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-collapseid =bs-example-navbar-collapse-1>
< ul class =nav navbar-nav>
< li>< a href =/ posts>博客< / a>< / li>
< li>< a href =/ contact>联络人< / a> < /锂>
< / ul>
< ul class =nav navbar-nav navbar-right>
< li class =dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdown>登录< b class =caret>< / b>< / a>
< ul class =dropdown-menurole =menu>
< li>< a href =/ auth / facebook>通过Facebook登录< / li>
< li>< a href =/ auth / linkedin>使用LinkedIn登录< / a>< / li>
< li>< a href =/ auth / github>使用GitHub登录< / a>< / li>
< li>< a href =/ auth / gplus>通过Google +< / a>登录< / li>
< / ul>
< / li>
< / ul>
< / div>
< / div>
我也试过评论第二个ul与下拉菜单 - 产生相同的不可点击的按钮。
解决方案放高
z-index on button例如 按钮{
position：relative;
z-index：100000;
}
When my navbar collapses the links and dropdown hide correctly and the button to display them shows but is not clickable. If I replace my navbar with the code on the bootstrap page then the bootstrap example bar and collapse button performs correctly, so it is a problem with my HTML somewhere..
My code is:
<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>
and the generated HTML from rails is (not signed in)
<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>
I have also tried commenting out the second ul with the dropdown - produces the same unclickable button.
解决方案
Put high z-index on button e.g.
button {
position: relative;
z-index: 100000;
}
这篇关于Twitter引导程序导航栏中的“折叠”按钮不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
