Question

我的问题是我有一个菜单，我不想在全宽浏览器窗口中显示，当窗口宽度小于768px时，可以通过切换栏点击看到。
但是当我单击切换栏时，我发现折叠转换不起作用。我已经测试过删除“完全隐藏”类，它运行正常，一切正常。
我希望有正常的过渡。我该怎么办？我非常感谢你的帮助产品：＆gt;

这是我的菜单代码

function getArray($index){
  $array = ['one', 'two', 'three'];

  if ($index < 0 || $index >= count($array)) {
    return null;
  } else {
    return $array[$index];
  }
}

echo getArray(2);

在style.css中，

<div class="full-hide" id="navbar-collapse-2">
<?php
   $args = array(
      'menu'        =>  'all-menu',
      'menu_class'  =>  'nav navbar-nav',
      'container'   =>  'false'
   );
   wp_nav_menu( $args );
?>
</div>

切换条形码

.full-hide{ display: none;}

Answer 1

如果我理解你的话，你希望按钮显示在768（这是小屏幕的最大尺寸）。

由于您使用引导程序，因此您也可以将其应用于按钮。

<button type="button" class="navbar-toggle collapsed hidden-md hidden-lg" data-toggle="collapse" data-target="#navbar-collapse-2" aria-expanded="false">
     <span class="sr-only">Toggle navigation</span>
     <span class="glyphicon glyphicon-align-justify toggle-bar" aria-hidden="true"></span>
</button>

将 hiddden-md 和 hidden-lg 类应用于它。当屏幕进入较低宽度时，它将仅显示按钮。

可选如果您使用单独的菜单，请将此技巧应用于您希望以此方式显示的菜单。我不确定，因为如果这是你的主菜单并且将BootStrap应用于它，或者你单独使用它（我主要使用不同类型的菜单进行移动开发），我无法从你的上下文中解决这个问题。

<div class="hidden-md hidden-lg" id="navbar-collapse-2">
<?php
   $args = array(
      'menu'        =>  'all-menu',
      'menu_class'  =>  'nav navbar-nav',
      'container'   =>  'false'
   );
   wp_nav_menu( $args );
?>
</div>

请参阅文档http://getbootstrap.com/css/#responsive-utilities

使用WordPress菜单的Bootstrap折叠切换菜单问题

1 个答案: