Bootstrap导航栏切换无法正确渲染

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文件。一旦我修复了它，它就起作用了！