Question

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

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

<div class="navbar-collapse collapse">

然后点击导航栏切换后：

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

我没有控制台错误所以我有点卡住了。这是一个GIF，显示发生了什么：

非常感谢任何帮助！

完整的NavBar代码，请注意导航链接由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" alt="Call Omicron Solutions"></a>
        <a href="mailto:lewis@email.com"><img src="/assets/uploads/Navbar-Icon-Email.png" alt="Email Omicron Solutions"></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" alt="Home"></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>

Answer 1

解决！问题是我安装了一个在Bootstrap 3中调用的Page Builder插件。我在源代码中完全错过了这个，所以我有Bootstrap 3＆amp; 4争夺导航栏的控制权。

自我注意事项：如果使用插件，请务必检查重复的bootstrap包含。

Bootstrap 4 Navbar Toggle Broken

1 个答案: