Bootstrap 导航栏菜单在 wordpress 上没有折叠
Bootstrap navbar menu no collapse on wordpress
我无法折叠 bootstrap 导航栏菜单。我正在为 wordpress 创建主题,但 bootstrap 导航栏不工作。 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
有人知道哪里出了问题吗? (我需要内联 - 我知道该怎么做,但主要问题是,在小型设备上折叠菜单的按钮不起作用)。
感谢帮助
您可以试试这个代码:
<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 的方式。
我无法折叠 bootstrap 导航栏菜单。我正在为 wordpress 创建主题,但 bootstrap 导航栏不工作。 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
有人知道哪里出了问题吗? (我需要内联 - 我知道该怎么做,但主要问题是,在小型设备上折叠菜单的按钮不起作用)。 感谢帮助
您可以试试这个代码:
<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 的方式。