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

Question

我遇到的问题是Twitter Bootstrap导航栏折叠重叠导航栏标题'alpha'并阻止链接可点击。

见下图：alpha有一个href链接但由于div.navbar-collapse重叠而无法点击。 以下是实时网站的链接：http://alchuang.com/indexnav.html

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

这里似乎有什么问题？

Answer 1

.navbar上的两个元素似乎导致了问题：

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

这些是与页面上对象的3D转换相关的元素 - 不知何故，它们会扭曲徽标上的可点击区域。

这些样式似乎没有在导航栏上使用，从.navbar课程中删除它们将解决问题。