Twitter Bootstrap导航栏折叠重叠导航栏标题

我有一个twitter的问题Bootstrap导航栏折叠重叠导航栏标题标志'阿尔法'，并防止链接是可点击的。Twitter Bootstrap导航栏折叠重叠导航栏标题

请参阅下图：alpha具有href链接，但由于div.navbar-collapse重叠而无法点击。这里的链接到直播网站：http://alchuang.com/indexnav.html

Note alpha is not clickable

<div class="navbar navbar-default nav-show" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <i class="fa fa-bars fa-lg"></i> 
     <i class="fa fa-times fa-lg" style="display:none;"></i> 
     </button> 
     <a class="navbar-brand" href="#viewer"><span class="logo">α</span></a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#about">About</a></li> 
     <li><a href="#works">Works</a></li> 
     <li><a href="#manifesto">Manifesto</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div>

什么似乎是这里的问题？

来源

2014-09-13 alchuang

你的问题不清楚，你应该在你的问题中包括相关的代码。 – Dan 2014-09-13 17:03:57

@丹我澄清了我的问题。谢谢 – alchuang 2014-09-13 17:13:37

看来，你的.navbar两个因素导致该问题：

-webkit-perspective:1000和-webkit-backface-visibility: hidden

这些都是与网页上的对象的3D转换元素 - 和不知何故，他们被扭曲的可点击区域在你的标志上。

这些样式看起来并未在导航栏中使用，并且从.navbar类中删除它们将解决此问题。

来源

2014-09-13 17:29:29 Dan

嘿，我也打算说，要删除'.navbar * \ webkit-perspective：1000; -webkit-backface-visibility：hidden; }这个。那个时候，我看到了一个新的答案。 – Ravimallya 2014-09-13 17:34:25

@Ravimallya是的 - 奇怪的问题。那些必须从OP所使用的任何模板继承。 – Dan 2014-09-13 17:35:33

我仍然不确定为什么OP使用那种风格... – Ravimallya 2014-09-13 17:38:35

Twitter Bootstrap导航栏折叠重叠导航栏标题

回答

相关问题