Bootstrap 4 导航栏切换损坏

Posted 2023-05-09

【中文标题】Bootstrap 4 导航栏切换损坏

【英文标题】：Bootstrap 4 Navbar Toggle Broken

【发布时间】：2018-10-07 03:37:23

【问题描述】：

我目前正在我正在构建的一个新的 Wordpress 网站上做一些响应式的工作。这是一个基于 Underscores 的自定义主题，因此我包含了用于导航栏和网格列的引导文件。所有引导功能都正常工作，只有当我的导航栏下拉到平板电脑视图（隐藏菜单项并显示切换按钮）时，加载页面时，导航栏加载打开，然后单击切换按钮时，它向上滑动并立即重新打开。

页面加载时应用于导航栏的类是：

<div class="navbar-collapse collapse">

然后一旦点击导航栏切换：

<div class="navbar-collapse collapse in">

我没有控制台错误，所以我有点卡住了。这是一个 GIF 来显示正在发生的事情：

任何帮助将不胜感激！

完整的导航栏代码，请注意导航链接是由 WordPress 中的wp_nav_menu() 函数加载的。

<nav id="site-navigation" class="main-navigation navbar navbar-expand-lg">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-bar" aria-controls="navigation-bar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="nav-right">
        <a href="tel:0"><img src="/assets/uploads/Navbar-Icon-Phone.png" ></a>
        <a href="mailto:[e-mail]"><img src="/assets/uploads/Navbar-Icon-Email.png" ></a>
    </div>
    <div class="collapse navbar-collapse" id="navigation-bar">
        <div class="menu-main-menu-container">
            <ul id="menu-main-menu" class="menu navbar-nav mr-auto mt-2 mt-lg-0">
                <li id="menu-item-128" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-128">
                    <a href="index.php"><img src="/assets/uploads/Navbar-Icon-Home.png" ></a>
                </li>
                <li id="menu-item-29" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-29">
                    <a href="http://localhost/about/">About</a>
                </li>
                <li id="menu-item-28" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-28">
                    <a href="http://localhost/services/">Services</a>
                </li>
                <li id="menu-item-27" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-27">
                    <a href="http://localhost/case-studies/">Case Studies</a>
                </li>
                <li id="menu-item-26" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
                    <a href="http://localhost/news/">News</a>
                </li>
                <li id="menu-item-25" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
                    <a href="http://localhost/contact-us/">Contact Us</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

【问题讨论】：

您确定您使用的是 Bootstrap 4 吗？ in 仅在 Bootstrap 3 中。

是的，我使用的是 4，我不知道这是 bootstrap 3 的东西，那么这很可能是问题所在？

@lewisnewson - Nav Bar 组件在 3.x 和 4.x 之间发生了一些重大变化，包括折叠函数的调用方式：getbootstrap.com/docs/4.1/components/navbar/…

提供您的代码

@lewis pastebin 网址似乎已损坏。请提供代码。

【参考方案1】：

解决了！问题是我安装了一个在 Bootstrap 3 中调用的 Page Builder 插件。我在源代码中完全错过了这个，所以我让 Bootstrap 3 和 4 争夺导航栏的控制权。 自我注意：如果使用插件，请始终检查重复的引导程序包含。