引导导航栏切换按钮隐藏在移动设备上，直到滚动（iOS）答案

【问题标题】：Bootstrap navbar toggle button hidden on mobile until scroll (iOS)引导导航栏切换按钮隐藏在移动设备上，直到滚动（iOS）
【发布时间】：2015-08-30 11:29:00
【问题描述】：

我在使用小型设备上的 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 中会出现这样的行为？

【问题讨论】：

标签： jquery ios twitter-bootstrap safari navbar

【解决方案1】：

我终于知道是什么破坏了导航栏！

就是这个css文件https://github.com/daneden/animate.css

我一次或多或少地禁用了所有内容，在 iOS 的 Safari 上上传和测试。

【讨论】：

【解决方案2】：

这个问题的答案很简单，只需在顶部添加这个脚本标签<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>

【讨论】：