Bootstrap：如何将顶级导航按钮添加为移动版本的子项答案

【问题标题】：Bootstrap: How to add top level nav button as a child for mobile versionBootstrap：如何将顶级导航按钮添加为移动版本的子项
【发布时间】：2013-05-30 16:21:46
【问题描述】：

我一直致力于使用 bootstrap 为 wordpress 网站制作更具响应性的主题。我将主导航设置为展开子项目 onhover 而不是点击事件。这是plugin I am using 来实现这一点。这在移动设备和台式机上都非常有效。我理解并阅读了开发人员将其设计为需要点击事件的理由，但我希望保留悬停功能。

我剩下的一个问题是顶级导航也是一个页面，在移动设备上不可点击。在移动设备上，当您单击顶级导航时，它会正确展开和折叠，但我无法单击顶部项目。所以我想做的是，如果屏幕分辨率足够小，可以作为平板电脑或智能手机使用，也可以将最上面的项目也包括在内，这样它就可以点击了。

如果您的示例导航项在桌面上是这样的

CLASSES
- HISTORY
- MATH

在平板电脑/手机等较小的分辨率上，它看起来像：

CLASSES
- CLASSES
- HISTORY
- MATH

我怎样才能做到这一点，或者最好的选择是什么？这是我的导航当前在 Wordpress 中的样子：

<div class="navbar navbar-inverse">
<div class="navbar-inner">
    <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a>
        <div class="nav-collapse">
            <ul class="nav">
                <?php
                if ( function_exists('wp_nav_menu') ) {
                    wp_nav_menu( array(
                            'menu'       => 'top_menu',
                            'depth'      => 2,
                            'container'  => false,
                            'menu_class' => 'nav',
                            'fallback_cb' => 'wp_page_menu',
                            //Process nav menu using our custom nav walker
                            'walker' => new twitter_bootstrap_nav_walker())
                    );
                }
                ?>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>
</div>

twitter_bootstrap_nav_walker 扩展了 Wordpress 的 Walker_Nav_Menu 类。它为从引导程序所需的数据库加载的页面添加了适当的属性。

这是带有子项的导航项上的 HTML 的样子。 data-hover="dropdown" 是让树在鼠标悬停时自动展开的原因。

<a href="http://localhost/classes" data-toggle="dropdown" data-hover="dropdown" data-target="#" class="dropdown-toggle js-activated">CLASSES <span class="caret"></span></a>

【问题讨论】：

标签： wordpress twitter-bootstrap wordpress-theming

【解决方案1】：

由于您使用的是引导程序，一个快速而肮脏的解决方案可能是简单地使用Responsive Utility classes。您可以将“CLASSES”菜单项设置为具有.visible-phone 和.visible-tablet 类

【讨论】：

这看起来正是我所需要的。谢谢。