Bootstrap Wordpress Navwalker 响应式
Bootstrap Wordpress Navwalker responsive
大家好,
我一直在使用 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 和各种技术开发的第一个自定义主题,所以我认为可能是一些简单的原因导致了这个问题。
感谢您提供的任何帮助!
在 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">
大家好, 我一直在使用 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 和各种技术开发的第一个自定义主题,所以我认为可能是一些简单的原因导致了这个问题。
感谢您提供的任何帮助!
在 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">