Bootstrap Navbar Toggle 无法正确渲染

Question

我正在使用 Bootstrap 3 构建一个 wordpress 主题。当我减小屏幕宽度以测试导航栏切换时，我会在图像上看到它。我认为这是一个 wordpress 问题，因为我没有接触过 Bootstrap 3 文件，但我不确定。

我使用 wp_enqueue_style 和 wp_enqueue_script 加载我的 css/js 文件

wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js'); wp_register_script( 'full-calendar', get_template_directory_uri() . '/js/fullcalendar.js'); wp_register_script( 'google-calendar', get_template_directory_uri() . '/js/gcal.js'); wp_register_script( 'main', get_template_directory_uri() . '/js/main.js'); wp_register_style( 'style', get_template_directory_uri() . '/style.css'); wp_register_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css'); wp_register_style( 'fullcalendar', get_template_directory_uri() . '/css/fullcalendar.css'); wp_register_style( 'gravityforms', get_template_directory_uri() . '/css/gravityforms.css');

// For either a plugin or a theme, you can then enqueue the script: wp_enqueue_script("jquery"); wp_enqueue_script( 'custom-script' ); wp_enqueue_script( 'full-calendar'); wp_enqueue_script( 'google-calendar'); wp_enqueue_script( 'main'); wp_enqueue_style('style'); wp_enqueue_style('bootstrap'); wp_enqueue_style('fullcalendar'); wp_enqueue_style('gravityforms');

导航栏部分的 header.php 如下所示：

        <nav class="navbar navbar-default navbar-fixed-top remove-bottom-margin" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="<?php echo home_url(); ?>"><img src="<?php bloginfo('template_url'); ?>/img/UCHURCH.png"/></a>
            </div>
            <ul class="pull-right" id="nav-menu-mobile">
                <?php
                    wp_nav_menu( array(
                    'menu'              => 'primary',
                    'theme_location'    => 'header-menu',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'collapse navbar-collapse',
                    'container_id'      => 'bs-example-navbar-collapse-1',
                    'menu_class'        => 'nav navbar-nav',
                    'echo'              => 'false',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
                    );
                ?>
            </ul>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container -->
    </nav>

我使用了 wp_bootstrap_navwalker，所以我可以使用 wordpress 的菜单编辑器来更改内容。但是，当我第一次实施它时，它很好。

谁能指出我正确的方向，这样我就可以在没有清晰背景的情况下让菜单显示在自己的部分中（就像在 bootstrap 3 演示中一样）？

Answer 1

我想通了，由于某种原因，我包含了错误的 bootstrap.js 文件。一旦我解决了这个问题，它就起作用了！