Question

我有一个类似下面的导航栏：

DateTime

使用CSS：

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

导航栏可在较大的屏幕上正常工作。手机屏幕就是问题所在。它在台式机中使用时可以正常工作（即我有一个鼠标点击链接）。但是，当使用移动设备（我使用iPhone）使用时，导航栏的链接不再起作用。更重要的是，一旦我点击了某些内容，我就无法再切换下拉按钮。

如果有帮助，请点击以下链接：codepen

编辑：我现在发现当我在iPhone上使用Safari时，导航栏无效。在谷歌浏览器中查看时，即使在移动设备中也能正常工作。关于它为什么不在Safari中工作的任何想法？谢谢你的帮助。

Answer 1

尝试使用包装器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>

无法点击移动设备上的下拉项目

1 个答案: