css - Bootstrap 导航栏无法与 wordpress 一起正常工作

Question

我正在使用 Bootstrap 4 处理 WordPress 自定义主题。我检查了所有连接，即 bootstrap CSS 和 js 已连接。如果我将它添加到主题中，另一个 Bootstrap 代码工作正常。

问题在于导航 .导航显示不正确。 如果您查看上图，就会发现导航设计不正确。

给出了我正在使用的代码

<header class="site-header" role="banner">
        <div class="navbar-wrapper">
            <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <?php if ( get_theme_mod( 'theme_wordpress_logo' ) ): ?>
                        <a href="<?php echo esc_url( home_url( '/' )); ?>">
                            <img src="<?php echo esc_attr(get_theme_mod( 'theme_wordpress_logo' )); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
                        </a>
                    <?php else : ?>
                        <a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>"><?php esc_url(bloginfo('name')); ?></a>
                    <?php endif; ?>
                    </div> <!-- navbar-header -->

                    <div class="navbar-collapse collapse">
                    <?php
                        wp_nav_menu(array(
                            'theme_location'    => 'primary',
                            'container'       => 'nav',
                            'container_class' => 'navbar-collapse collapse',
                            'menu_class'      => 'nav navbar-nav navbar-right',
                            'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
                            'walker'          => new wp_bootstrap_navwalker()
                        ));
                    ?>
                    </div><!-- navbar-collapse -->
                </div>
            </div>
        </div><!-- navbar-wrapper -->
    </header><!-- Header -->

Answer 1

如果您使用的是 Bootstrap 4，请将您的代码更改为:

   <nav class="navbar navbar-topbar navbar-expand-xl navbar-dark bg-primary">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="collapsingNavbar">
        <a class="navbar-brand" href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a>
        <?php
            wp_nav_menu( array(
            'theme_location' => 'primary',
            'container'      => false,
            'menu_class'     => 'nav navbar-nav',
            'fallback_cb'    => 'wp_bootstrap_navwalker::fallback',
            'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
            'depth'          => 2,
            'walker'         => new wp_bootstrap_navwalker()
        ) );
        ?>
        <?php get_template_part('navbar-search'); ?>
    </div>
    </nav>