我在折叠bootstrap导航栏菜单时遇到问题。我正在为wordpress创建主题并且bootstrap navbar无法正常工作。 bootstrap.css和bootstrap.js加载到函数中。这是我的代码:
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top" 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(); ?>">
<img src="<?php echo get_bloginfo('template_url'); ?>/img/logo.png" class="logo">
</a>
</div>
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'navbar',
'menu_class' => 'nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</nav>
它创造了这个: Output
任何人都知道出了什么问题? (我需要它内联 - 我知道如何做到这一点,但主要的问题是,在小设备上折叠菜单的按钮不起作用)。 谢谢你的帮助
答案 0 :(得分:0)
您可以尝试以下代码:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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(); ?>" id="top"><img alt="Company Logo" src="<?php echo (get_template_directory_uri() . '/assest/imgs/logo/e4k-logo.png');?>" /></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 3,
'menu_class' => 'nav navbar-nav navbar-right',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</div>
</div>
</nav>
我直接从我的一个WordPress主题中取得了这个,但是如果它不起作用那么它必须是你在函数中加载bootstrap.css和bootstrap.js的方式。