Bootstrap 响应式导航栏切换按钮不起作用

Question

我正在为 WordPress 开发一个自定义主题，我目前正在使用响应式导航栏。它向我显示 toggle-icon 但当我单击它时没有任何反应。

我正在使用 bootstrap 的最新版本，直接从网站下载...

我在 header 上加载了 jquery:

<script type='text/javascript' src='http://localhost/eltecnofilo/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script>
<script type='text/javascript' src='http://localhost/eltecnofilo/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>

在页脚 bootstrap 文件：

<script type='text/javascript' src='http://localhost/eltecnofilo/wp-content/themes/ElTecnofilo/bootstrap/js/bootstrap.js?ver=5.0.0' id='bootstrap-js'></script>
<script type='text/javascript' src='http://localhost/eltecnofilo/wp-content/themes/ElTecnofilo/bootstrap/js/bootstrap.esm.js?ver=5.0.0' id='bootstrap-esm-js'></script>
<script type='text/javascript' src='http://localhost/eltecnofilo/wp-content/themes/ElTecnofilo/bootstrap/js/bootstrap.bundle.js?ver=5.0.0' id='bootstrap-bundle-js'></script>

这是我的导航栏代码

<div class="row full-width black-bg">
    <nav class="navbar navbar-expand-md navbar-dark">
        <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapse-target aria-expanded="false" aria-controls="navbar"">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapse-target">
            <ul class="nav navbar-nav">
                <?php
                    $getMenu = wp_get_nav_menu_items( 'menu principal'); // Where menu1 can be ID, slug or title
                    foreach($getMenu as $item){
                        echo '<li class="nav-item"><a class="nav-link" href="' . $item->url . '">' . $item->title . '</a></li>';
                    }
                ?>
            </ul>
        </div>
    </nav>
</div>

有什么想法是错误的吗？

Answer 1

BOOTSTRAP 文档

https://getbootstrap.com/docs/5.0/getting-started/introduction/

Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper. Place one of following s near the end of your pages, right before the closing tag, to enable them.

请记住，Bootstrap 依赖于 Jquery 和 Popper.js 的动态功能。

我在你的脚本文件中没有看到 Popper.js，尝试包含它。

https://popper.js.org/

Bootstrap 响应式导航栏切换按钮不起作用

Bootstrap responsive navbar toggle button not working

css

wordpress-theming

bootstrap-4

BOOTSTRAP 文档