Bootstrap Navbar在手机上的奇怪问题

如何解决Bootstrap Navbar在手机上的奇怪问题

我有一个网站，该网站使用Bootstrap 2.1.1和移动设备上的导航栏作为错误。当我单击下拉图标时，导航栏会快速打开并在此之后折叠。当我重新单击时，它会正常打开，但是如果我单击在原始对象旁边的Produits下拉列表，则可以打开，但是当我单击此下拉列表中的链接时，似乎单击的是背景中的另一个链接所在的链接在我下拉菜单之前。导航栏代码如下：

<div class="row">
<div class="col-md-12">
    <div class="navbar navbar-inverse">
        <div class="container-fluid">
       
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1" aria-expanded="false">
                    <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="collapse navbar-collapse" id=navbar-1>
                <ul class="nav navbar-nav">
                    <li id="home-lnk"><a href="/">Accueil</a></li>
                    <li id="produits-lnk" role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" role="button" aria-haspopup="true" aria-expanded="false">
                            Produits <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li id="system-lnk"><a href="/systeme">Système de gestion automatisé</a></li>
                            <li id="releasers-lnk"><a href="/relacheurs">Relâcheurs / Trappe à humidité / Panier Balle</a></li>
                            <li id="vacuum-lnk"><a href="/pompes_vacuum">Pompes Vacuum</a></li>
                            <li id="modulation-lnk"><a href="/controleur_modulation">Contrôleurs de modulation pour pompe vacuum</a></li>
                        </ul>
                    </li>
                    <li id="team-lnk"><a href="/equipe">Équipe</a></li>
                    <li id="contact-lnk"><a href="/contact">Contact</a></li>
                    <!--<li id="ditributors-lnk"><a href="/distributeurs">distributeurs</a></li>-->
                    <li id="catalog-lnk"><a target="_blank" href="/files/Catalogue_ErabliTEK_2019.pdf">Catalogue (PDF)</a></li>
                </ul>
                <ul class="nav navbar-nav pull-right">
                    <li><a href="http://admin.erablitek.com">Connexion</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

解决方法

在首页HTML中的第22行：

<script type="text/javascript" src="/js/require.js" data-main="/js/common.js"></script>

在common.js内部，第19行：

bootstrap: '/js/lib/bootstrap.min',

OP和我一样都是法语，但下面是英语。

J'aidécouvertque le站点收费plusieurs版本与Tempost兼容，版本号3.3.7和CDN以及澳大利亚2.2.1版的不兼容（通过/js/lib/bootstrap.min'）可以通过/lib/common.js [等到trucs assez vieux par ex。 jQuery 1.7！]，可能会破坏自由冲突。 J.en ques puisque common.js estchargéaprès la版本3.3.7 du CDN，elle supplante cettedernièreetçàbug，第3页上的第3.7页il n'y a aucun bug en fait dans le nav mobile：Voir copden：

https://codepen.io/larrytherabbit/pen/gOrvzbj

布雷夫（Bref），死刑者宪兵队（Le nav mobile marche）100％比恩。等等3.3.7 qui estprésente（je pense），ce qui me fait penser que leproblèmeestlà，ou au moins en partie。

Donc，si vas修饰符/lib/common.js等，使les vieilles librairies d'aprèsmoiçaira受到保护。不能再有新的想法了。

我发现该站点同时加载多个不兼容的Boostrap版本，尤其是CDN的3.3.7版本，以及通过/ lib / common在本地的2.2.1版本（通过/js/lib/bootstrap.min'）。 js [以及其他旧版本，例如jQuery 1.7！]，可能还有其他冲突的库。我的结论是，由于common.js是在CDN版本3.3.7之后加载的，因此它覆盖了CDN，这是一个错误，因为如果仅使用3.3.7启动主页，则不会有任何错误。在移动导航中的事实：请参阅copden：

https://codepen.io/larrytherabbit/pen/gOrvzbj

无论如何，如果您看一下我的Codepen，那么nav mobile可以100％很好地工作。我认为是3.3.7，这使我认为问题存在，或者至少是部分存在。

因此，如果您要修改/lib/common.js并删除旧的库，我认为会很好。如果它不起作用，请找我，我再看一遍。