Wordpress和响应式css上的bootstrap nav切换错误

Question

我在localhost中使用我的主题，并且有一个关于导航切换和响应式css的bug (我相信)。下面是我的菜单的html代码：

<nav class="main-menu">
    <div class="navbar-header">
        <!-- Toggle Button -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    </div>

    <div class="navbar-collapse collapse clearfix">
        <ul class="navigation clearfix">
            <li class="current"><a href="index.html">Home</a></li>
            <li><a href="project.html">Project</a></li>
            <li><a href="partners.html">Partners</a></li>
            <li><a href="people.html">People</a></li>
            <li><a href="news.html">News</a></li>

        </ul>
    </div>
</nav>

下面是我在wordpress中使用的：

<nav class="main-menu">
    <div class="navbar-header">
        <!-- Toggle Button -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse clearfix">

    <?php
        wp_nav_menu( array(
            'theme_location'    => 'menu-1',

            'menu_class'        => 'navigation clearfix',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker())
                );
    ?>

    </div>
</nav>

但这并不管用。

因此，我将以下内容放入functions.php：

require_once get_template_directory() . '/wp-bootstrap-navwalker.php';
    register_nav_menus( array(
    'menu-1' => esc_html__( 'Primary', 'visionitn' ),
));

以及一个函数中的所有css文件：

function add_theme_scripts() {
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.css');
    wp_enqueue_style( 'revolution-slider', get_template_directory_uri() . '/assets/css/revolution-slider.css');
    wp_enqueue_style( 'slider-setting', get_template_directory_uri() . '/assets/css/slider-setting.css');
    wp_enqueue_style( 'responsive', get_template_directory_uri() . '/assets/css/responsive.css');
    wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/assets/css/font-awesome.css');
    wp_enqueue_style( 'flaticon', get_template_directory_uri() . '/assets/css/flaticon.css');
    wp_enqueue_style( 'animate', get_template_directory_uri() . '/assets/css/animate.css');
    wp_enqueue_style( 'owl', get_template_directory_uri() . '/assets/css/owl.css');
    wp_enqueue_style( 'jquery.fancybox', get_template_directory_uri() . '/assets/css/jquery.fancybox.css');
    wp_enqueue_style( 'jquery.mCustomScrollbar.min', get_template_directory_uri() . '/assets/css/jquery.mCustomScrollbar.min.css');
}

add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

问题是，当你将屏幕缩小到移动分辨率时，切换按钮与我的静态html模板相比不起作用。

我的网页的字体比我的静态模板稍大一点。我也有一些响应式的css不工作。

Answer 1

对不起，这是我的html输出：

‘

<!--Nav Outer-->
                        <div class="nav-outer clearfix">
                            <!-- Main Menu -->
                            <nav class="main-menu">
                                <div class="navbar-header">
                                    <!-- Toggle Button -->
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                </div>
                                <div class="navbar-collapse collapse clearfix">

                                <div class="menu-menu-principal-container"><ul id="menu-menu-principal" class="navigation clearfix"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-7 current_page_item menu-item-9 active"><a title="Home" href="http://localhost/vision-itn/">Home</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a title="Project" href="http://localhost/vision-itn/project/">Project</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a title="Partners" href="http://localhost/vision-itn/partners/">Partners</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a title="People" href="http://localhost/vision-itn/people/">People</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a title="News" href="http://localhost/vision-itn/news/">News</a></li>
</ul></div>                                
                                </div>
                            </nav>
                            <!-- Main Menu End-->

                            <!--Btn Outer-->
                            <div class="btn-outer">
                                <a href="contact.html" class="theme-btn quote-btn btn-style-one">GET In Touch</a>
                            </div>

                        </div>
                        <!--Nav Outer End-->

‘