不能點擊移動

下拉項目我有類似下面的一個導航欄：不能點擊移動

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="container-fluid text-center"> 
    <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
     <li><a href="#about">ABOUT</a></li> 
     <li><a href="#works">PORTFOLIO</a></li> 
     <li><a href="#contact">CONTACT</a></li> 
    </ul> 
    </div> 
    </div> 
</nav>

與CSS：

@media (max-width:768px) { 
.navbar-default .navbar-collapse { 
border: none; 
box-shadow: none; 
} 

.navbar-default .navbar-collapse { 
background: #eeeeee; 
position: absolute; 
width:100%; 
top: 40px; 
} 
}

導航欄正常工作了大屏幕上。移動屏幕是問題。它在桌面上使用時可以正常工作（即，我有一個鼠標點擊鏈接）。但是，當使用移動設備（我使用iPhone）時，導航欄的鏈接不再工作。更重要的是，一旦我點擊了某些東西，我無法再切換下拉按鈕。

如果有幫助，這裏的codepen鏈接：codepen

編輯：現在我發現，當我在我的iPhone上使用Safari導航欄不工作。在Google Chrome瀏覽器中查看時，即使在移動設備上也可以正常工作。任何想法，爲什麼它不在Safari的工作？感謝您的幫助。

來源

2016-09-20 Jan Miguel Carangan

能在移動codepen作品...... –

哇真的嗎？雖然我無法在iPhone上點擊它們。我會嘗試不同的移動設備進行檢查。感謝您的回答:) –

我會繼續嘗試。謝謝。 –

嘗試使用包裝div更新您的代碼。

.nav-wrapper{ 
 
    position: relative; 
 
    display: inline-block; 
 
}

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
<div class="container-fluid text-center"> 
 
<div class="navbar-header"> 
 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </button> 
 
</div> 
 
    
 
    <div class="nav-wrapper"> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#about">ABOUT</a></li> 
 
     <li><a href="#works">PORTFOLIO</a></li> 
 
     <li><a href="#contact">CONTACT</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</nav>

來源

2016-09-20 06:08:45

我已經做到了，而且工作順利。但是，當我使用Safari時，我仍然遇到問題（即無法單擊導航欄列表項目）。但是，在其他瀏覽器中使用它時工作正常。 –

@gsuxlzt我已經更新了nav-wrapper div的位置。請嘗試。 –

不能點擊移動

回答

相關問題