Twitter Bootstrap navbar-collapse navbar-header overlapping navbar-header

Question

트위터 Bootstrap navbar-collapse가 navbar-header 로고 '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에서 사용중인 것으로 보이지 않으므로 .navbar 클래스에서 제거하면 문제가 해결됩니다.