我在小型设备上使用iOS (Safari)的引导导航栏切换按钮时遇到了一些麻烦。在其他浏览器中一切正常,甚至在手机和平板电脑等小型设备上也是如此。
当页面加载时,切换按钮被隐藏,直到我滚动页面。在浏览了菜单中的几个链接之后,一切似乎都正常工作了。看起来它只是在开始的时候不起作用。
我没有特殊的CSS或任何东西,只有一个导航栏类navbar-fixed-top。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand"></a>
</div>
<div class="navbar-collapse collapse">
<ul id="nav-main" class="nav navbar-nav navbar-left">
<li id="startlnk"><a class="startlnk" href="#start" data-toggle="collapse" data-target=".navbar-collapse.in">Start</a></li>
<li id="aboutuslnk"><a href="#aboutus" data-toggle="collapse" data-target=".navbar-collapse.in">Om os</a></li>
<li id="meetuslnk"><a href="#meetus" data-toggle="collapse" data-target=".navbar-collapse.in">Medarbejdere</a></li>
<li id="productslnk"><a href="#products" data-toggle="collapse" data-target=".navbar-collapse.in">Produkter</a></li>
<li id="priceslnk"><a href="#prices" data-toggle="collapse" data-target=".navbar-collapse.in">Priser</a></li>
<li id="footerlnk"><a href="#footer" data-toggle="collapse" data-target=".navbar-collapse.in">Kontakt</a></li>
<li style="color:#fff;"><i class="fa fa-phone"></i>Telefon: 75 72 62 52</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="facebook">
<a target="_blank" href="https://www.facebook.com/chamelloungevejle?fref=ts"><i class="fa fa-facebook-square fa-lg facebook-blue"></i></a>
</li>
</ul>
</div>
</div>
</div>
有人知道为什么切换按钮在iOS设备上的Safari中表现得像这样吗?
我终于知道是什么弄坏了导航条了!
就是这个css文件https://github.com/daneden/animate.css
我一次或多或少地禁用了所有东西,在iOS的Safari上上传和测试。
答案很简单,只需在顶部添加这个script标签<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>