Bootstrap Wordpress Navwalker 响应式

Question

大家好，我一直在使用 roots/sage、wordpress、bootstrap 4、VVCW 和菜单的 WP_Bootstrap_Navwalker 开发我的第一个主题。凉亭组件中还有一大堆 bootstrap 的东西。

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

到目前为止，这是我的代码

//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 旁边添加 class .navbar-expand{-sm|-md|-lg|-xl}（例如：.navbar-expand-md）。这是在 Bootstrap Navbar documentation.

中提到的第一名

所以我认为您唯一需要做的改动是：

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

Bootstrap Wordpress Navwalker 响应式

Bootstrap Wordpress Navwalker responsive

wordpress

twitter-bootstrap-4

wp-nav-walker

roots-sage