Question

大家好，我一直在使用roots / 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-expand{-sm|-md|-lg|-xl}旁边添加类.navbar-expand-md（例如：.navbar）。这是Bootstrap Navbar documentation的第一名。

所以我认为你唯一需要改变的是：

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

Bootstrap Wordpress Navwalker响应

1 个答案: