wordpress - 如何向 WordPress 中的 Bootstrap 主题的移动版本添加不同的菜单？

Question

我有一个适用于台式机和平板电脑的主菜单，但我希望当用户进入移动 View 时该菜单中的链接会发生变化。不太确定从哪里开始。这就是我在 header.php 文件中为桌面版本的 Bootstrap 菜单所做的事情:

<div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="<?php bloginfo( 'url' ); ?>"<?php bloginfo( 'name' ); ?>><img src="<?php bloginfo('template_directory');?>/img/snaglogo.png" /></a>
</div>
<div class="collapse navbar-collapse">


<?php
    $args = array(
          'menu'         => 'header-menu',
          'menu_class'   =>'nav navbar-nav navbar-right',
          'container'    =>'false'
          );
            wp_nav_menu( $args );

 ?>

</div><!--/.nav-collapse -->

我要为移动设备添加另一 block 吗？不太确定。

Answer 1

我建议您在导航栏上使用 Bootstrap 类:

<div class="hidden-xs hidden-sm">

然后使用以下类为移动设备创建单独的导航栏:

<div class="visible-xs visible-sm hidden-md hidden-lg">

这将允许您将链接设置为完全不同的内容，而不会以不利的方式影响导航栏。

以下是有关“隐藏”和“可见”类的更多信息:

http://getbootstrap.com/css/#responsive-utilities-classes