Bootstrap Wordpress Navwalker 响应式

Question

大家好， 我一直在使用 root/sage、wordpress、bootstrap 4、VVCW 和 WP_Bootstrap_Navwalker 为菜单开发我的第一个主题。在凉亭组件中还放置了一大堆引导程序。

一切正常且很酷，除了菜单没有像正常操作那样响应，例如菜单显示直到达到一定宽度然后出现菜单按钮，可以单击该按钮并且导航下拉。

这是我目前的代码

//header.php

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- 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(); ?>">
        <?php bloginfo('name'); ?>
          </a>
    </div>
    </div>
        <?php
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-default',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav test',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker())
        );
        ?>
    </div>
</nav>

//function.php

require_once('lib/wp-bootstrap-navwalker.php');

function register_menus() {
    register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'Beatroute' ),
) );
  }
add_action( 'init', 'register_menus' );

function wpt_register_js() {
    wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/bower_components/bootstrap/dist/js/bootstrap.js', 'jquery');
    wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );

function wpt_register_css() {
    wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/bower_components/bootstrap/dist/css/bootstrap.css' );
    wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

我只是想要 BS 菜单的常规功能。我怀疑网格断点有什么用。因为这是我使用 Roots/Sage 和各种技术开发的第一个自定义主题，所以我认为这可能是一些简单的原因造成的。

感谢您提供的任何帮助！

Answer 1

在 Bootstrap 4 中，您必须明确定义导航栏断点。为此，您可以在现有的 .navbar 旁边添加类 .navbar-expand{-sm|-md|-lg|-xl}（例如：.navbar-expand-md）。这是在 Bootstrap Navbar documentation 中提到的第一名。

所以我认为你必须做的唯一改变是：

<nav class="navbar navbar-default navbar-expand-md" role="navigation">