Question

我有以下问题，我刚刚制作了一个新主题（干净），我想从bootstrap开始使用基本的导航栏。问题是当我点击它时它不会崩溃（可能是2px就是这样）。

我没有得到任何关于jQuery版本或错误的错误，它没有找到任何jQuery。也许是Wordpress本身的jQuery与bootstrap之间存在冲突？

header.php

<body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <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="#">Project name</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <?php
             wp_nav_menu( array(
                 'menu'              => 'main-menu',
                 'theme_location'    => 'main-menu',
                 'depth'             => 2,
                 'container'         => 'div',
                 'container_class'   => 'collapse navbar-collapse',
                         'container_id'      => 'bs-example-navbar-collapse-1',
                 'menu_class'        => 'nav navbar-nav',
                 'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                 'walker'            => new wp_bootstrap_navwalker())
             );
         ?>
                </div><!--/.nav-collapse -->
            </div>
        </nav>

的functions.php

/* Add bootstrap support to the Wordpress theme*/
function theme_add_bootstrap() {
    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.0.0', true );
    wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );

// add fontAwesome
function fontAwesome(){
    wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
}
add_action('wp_enqueue_scripts', 'fontAwesome');

Answer 1

您好data-target="#navbar"，因此必须使用参数container_id中的值为navbar

Answer 2

找到了解决方案！

'container_class'   => 'collapse navbar-collapse',
'container_id'      => 'bs-example-navbar-collapse-1',

这些类引起了一个问题，jQuery / Boostrap并不知道要切换什么，有2个navbar-collapse。

Bootstrap Navbar不会与Wordpress切换

2 个答案: