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

Question

我遇到了 twitter Bootstrap navbar-collapse 与 navbar-header 徽标“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 类中删除将解决问题。