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在navbar部分看起來像這樣：

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