Wordpress 引导折叠菜单不显示链接答案

【问题标题】：Wordpress bootstrap collapse menu not showing linksWordpress 引导折叠菜单不显示链接
【发布时间】：2014-01-27 01:51:10
【问题描述】：

我正在开发一个用 bootstrap 制作的 wordpress 主题。我目前有一个可折叠的导航栏，并且链接在未折叠时会填充并工作。但是当我更改分辨率并出现按钮时，您可以单击但链接不会显示。

这是我放在 header.php 中的导航栏

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="navigation">
<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>      
             <?php if ( get_theme_mod( 'themeslug_logo' ) ) : ?>
                <a class="navbar-brand" href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a>
              <?php else : ?>
                    <a class="navbar-brand" href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a>
              <?php endif; ?>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
            <?php  /* menu */
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary-menu',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            ); 
            ?>
</ul>
            </div>
</nav>

这是输出的 HTML：

<div class="navbar-collapse in" id="bs-example-navbar-collapse-1" style="height: auto;">
<ul class="nav navbar-nav">
 <div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menu-navigation" class="nav navbar-nav">
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22">
<a title="Blog" href="http://dillonraphael.com/blog/">Blog</a>
</li>
</ul>
</div>
</ul>
</div>

【问题讨论】：

页面底部是否包含/调用了 bootstrap.js 或 bootstrap javascript 文件？如果不是，该按钮将不会执行任何操作。
@Braunson 该按钮有效。我按下它，白色的盒子就会展开。但是里面没有链接。当网站使用较大的屏幕尺寸时，链接会显示在实际导航栏上
可以抓取WordPress的输出并发布吗？
@Braunson 已发布。所以实际的链接正在输出。

标签： php css wordpress twitter-bootstrap

【解决方案1】：

您的输出不正确，它有两个带有 navbar-collapse 的 div

使用 WordPress wp_nav_menu 函数并删除包裹在它周围的 div 和 ul，因为它会生成它自己的并且您指定了正确的类。

删除这个和它的结束标签：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">

然后将其添加到您的数组中

container_id => 'bs-example-navbar-collapse-1',

【讨论】：