Bootstrap 移动设备上的导航栏奇怪问题

Question

我有一个使用 bootstrap 2.1.1 和移动设备上的导航栏作为错误的网站。当我点击下拉图标时，导航栏打开得非常快，然后就折叠起来了。当我重新单击时，它可以正常打开，但是如果我单击原始下拉菜单中的 Produits 下拉菜单，它可以正常打开，但是当我单击此下拉菜单中的 link 时，它似乎单击了 link 在我下拉菜单之前另一个 link 所在的背景中。导航条代码如下：

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

Answer 1

首页HTML，第22行：

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

在 common.js 内，第 19 行：

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

我发现该站点同时加载了多个不兼容的 Boostrap 版本，特别是来自 CDN 的 3.3.7 以及本地的 2.2.1（通过 /js/lib/bootstrap.min'）通过 [=28= .js [以及其他旧东西，如 jQuery 1.7!]，可能还有其他冲突的库。我的结论是，由于 common.js 在 CDN 的版本 3.3.7 之后加载，它会覆盖后者，这是一个错误，因为如果您仅使用 3.3.7 启动主页移动导航中实际上没有错误：请参阅 copden :

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

无论如何，如果您看一下我的代码笔，导航移动设备 100% 运行良好。现在是 3.3.7（我认为），这让我认为问题是存在的，或者至少是部分存在的。

因此，如果您要修改 /lib/common.js 并删除旧库，我认为它会很好。不行的话回来找我，我再看看

Bootstrap 移动设备上的导航栏奇怪问题

Bootstrap navbar strange issue on mobile

html

twitter-bootstrap-2