Question

我使用Bootstrap 3构建wordpress主题。当我减小屏幕宽度以测试导航栏切换时，我会在图像上显示。我认为它是一个wordpress问题，因为我还没有触及Bootstrap 3文件，但我不确定。 menu not rendering properly

我使用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＆＃39;菜单编辑改变一切。但是，当我第一次实现它时，它很好。

有人可以指出我正确的方向，所以我可以让菜单显示在自己的部分而没有明确的背景（如在bootstrap 3演示中）？

Answer 1

我想通了，出于某种原因我包含了错误的bootstrap.js文件。一旦我修复了它，它就有用了！

Bootstrap Navbar切换无法正确渲染

1 个答案: