带有 wp_bootstrap_navwalker 浮动问题的引导菜单
Posted
技术标签:
【中文标题】带有 wp_bootstrap_navwalker 浮动问题的引导菜单【英文标题】:Bootstrap menu with wp_bootstrap_navwalker float issue 【发布时间】:2014-10-13 04:05:35 【问题描述】:我在 wordpress 中使用 Bootstrap 和 wp_bootstrap_navwalker.php
脚本来输出我的菜单。它有一些左对齐的项目(“主”菜单),还有一些右对齐的(“社交”菜单),就像这样。
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!--/.navbar-header -->
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
<?php
wp_nav_menu(
array(
'menu' => 'social',
'theme_location' => 'social',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav navbar-right',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
)
);
?>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->
问题是:“社交”菜单项应该正确对齐,但由于某种原因,它们会在主菜单下方下降一行。我似乎无法弄清楚如何将两个菜单放在同一行。有什么想法我错了吗?作为直接代码工作正常,但是当我尝试将我的代码实现到 wp_nav_menu 数组中时,它出错了。
供参考,输出页面来源为:
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!--/.navbar-header -->
<div class="collapse navbar-collapse"><ul id="menu-main" class="nav navbar-nav"><li id="menu-item-1751" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1751 active"><a title="Home" href="http:///">Home</a></li>
<li id="menu-item-1750" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1750"><a title="About" href="http://about/">About</a></li>
<li id="menu-item-1749" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1749"><a title="Shows" href="http://shows/">Shows</a></li>
<li id="menu-item-1748" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1748"><a title="Music" href="http://music/">Music</a></li>
<li id="menu-item-1746" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1746"><a title="Video" href="http://video/">Video</a></li>
<li id="menu-item-1747" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1747"><a title="Lyrics" href="http://lyrics/">Lyrics</a></li>
<li id="menu-item-1745" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1745"><a title="Contact" href="http://contact/">Contact</a></li>
</ul></div>
<ul id="menu-social" class="nav navbar-nav navbar-right"><li id="menu-item-1852" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1852"><a title="Facebook" href="http://facebook.com">Facebook</a></li>
<li id="menu-item-1853" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1853"><a title="Twitter" href="http://twitter.com">Twitter</a></li>
<li id="menu-item-1854" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1854"><a title="Instagram" href="http://instagram.com">Instagram</a></li>
<li id="menu-item-1855" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1855"><a title="Youtube" href="http://youtube.com">Youtube</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->
更新:看到第一个 UL 列表之后的那个杂散的 DIV 标记了吗?这似乎是问题所在。如何从数组中删除该 DIV?
【问题讨论】:
你能展示一个解决这个问题(或网站)的 jsfiddle 吗? 查看更新的输出代码 知道如何让 wp_bootstrap_navwalker 使用 depth=>3 吗?有什么建议吗? 【参考方案1】:试试:
<div class="collapse navbar-collapse">
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'false',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
<?php
wp_nav_menu(
array(
'menu' => 'social',
'theme_location' => 'social',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav navbar-right',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
)
);
?>
</div>
您指定在带有'container' => 'div'
的第一个菜单周围有一个 div,所以我将其从其中删除并放在两个 wp_nav_menu 周围。
【讨论】:
对不起 - 我的错误。你是完全正确的!非常感谢您的帮助。以上是关于带有 wp_bootstrap_navwalker 浮动问题的引导菜单的主要内容,如果未能解决你的问题,请参考以下文章
带有多个链接的 NSAttributedString 的 UILabel,带有行限制,显示尾部截断,带有未见文本的 NSBackgroundColorAttributeName
使用带有 uuencode 的“sendmail”发送邮件,并带有主题
如何翻转正面带有标签而背面带有另一个标签的视图 - 参见图片