bulma导航栏菜单默认在移动设备上打开

心理

我有一个正在操作的bulma导航栏。下面是生成的代码。在桌面上,菜单正确显示,并按预期打开和关闭下拉菜单。

但是,在移动设备上,所有下拉列表默认情况下都是打开的,并且当我单击“导航栏链接”时,尽管添加和删除了“ is-active”类,但菜单未如预期那样打开和关闭。

<nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      </a>
   </div>
   <div id="navbar" class="navbar-menu is-active">
      <div class="navbar-start">

         <div class="navbar-item has-dropdown">
            <a class="navbar-link">Data Types</a>
            <div class="navbar-dropdown">
               <div class="types">
                  Select Content
               </div>
            </div>
         </div>
      </div>
   </div>
</nav>

上面代码中的“处于活动状态”是从汉堡菜单打开菜单。我究竟做错了什么?

心理

我需要加这个混蛋

.navbar-item {
    &.has-dropdown {
      .navbar-dropdown {
        display: none;
      }
      &.is-active {
        .navbar-dropdown {
          display: block;
        }
      }
   }
}

在我的混蛋@mobile下。然后,移动设备的行为就像台式机一样。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

引导导航栏-仅在移动设备上显示子菜单

来自分类Dev

导航栏未显示在移动设备上

来自分类Dev

移动设备上的全角垂直导航栏

来自分类Dev

Bootstrap 导航栏在移动设备上透明

来自分类Dev

Bulma 上的居中和右对齐导航。移动设备问题

来自分类Dev

Bootstrap 4导航栏下拉菜单项在移动设备上不可单击

来自分类Dev

在移动设备上的TWBS导航栏,禁用下拉菜单并改用链接

来自分类Dev

引导程序3:打开的导航栏的内容无法在移动设备上滚动

来自分类Dev

导航栏引导菜单未显示在移动设备中

来自分类Dev

为什么我的导航栏在移动设备上缩放页面?

来自分类Dev

Bootstrap 4导航栏始终在移动设备上可见

来自分类Dev

Bootstrap 4搜索导航栏未显示在移动设备上

来自分类Dev

移动设备上的水平对齐导航栏元素-引导3

来自分类Dev

Twitter Bootstrap 3导航栏在移动设备上不会崩溃

来自分类Dev

我的导航栏未显示在移动设备上

来自分类Dev

在导航栏上设置Bootstrap移动菜单的样式

来自分类Dev

在导航栏上设置Bootstrap移动菜单的样式

来自分类Dev

在导航栏上突出显示默认页面当前菜单

来自分类Dev

如何使移动设备的导航栏菜单占据我设备屏幕的 100%

来自分类Dev

如何在Bootstrap导航栏中加快移动设备下拉菜单?

来自分类Dev

导航栏折叠菜单在移动设备和表格视口上不起作用

来自分类Dev

CSS / Bootstrap-网站上的侧边栏更改为移动设备上的导航栏

来自分类Dev

WordPress移动导航菜单:在iPhone和其他移动设备上单击可显示菜单,但在iPad上则单击

来自分类Dev

如何默认导航抽屉在移动设备上关闭并在桌面上打开?

来自分类Dev

如何折叠移动设备的导航栏?

来自分类Dev

引导程序如何使导航栏上的图标在移动设备上不消失

来自分类Dev

Bulma 更改导航菜单

来自分类Dev

Bootstrap导航栏汉堡菜单无法打开

来自分类Dev

导航栏菜单折叠未打开

Related 相关文章

  1. 1

    引导导航栏-仅在移动设备上显示子菜单

  2. 2

    导航栏未显示在移动设备上

  3. 3

    移动设备上的全角垂直导航栏

  4. 4

    Bootstrap 导航栏在移动设备上透明

  5. 5

    Bulma 上的居中和右对齐导航。移动设备问题

  6. 6

    Bootstrap 4导航栏下拉菜单项在移动设备上不可单击

  7. 7

    在移动设备上的TWBS导航栏,禁用下拉菜单并改用链接

  8. 8

    引导程序3:打开的导航栏的内容无法在移动设备上滚动

  9. 9

    导航栏引导菜单未显示在移动设备中

  10. 10

    为什么我的导航栏在移动设备上缩放页面?

  11. 11

    Bootstrap 4导航栏始终在移动设备上可见

  12. 12

    Bootstrap 4搜索导航栏未显示在移动设备上

  13. 13

    移动设备上的水平对齐导航栏元素-引导3

  14. 14

    Twitter Bootstrap 3导航栏在移动设备上不会崩溃

  15. 15

    我的导航栏未显示在移动设备上

  16. 16

    在导航栏上设置Bootstrap移动菜单的样式

  17. 17

    在导航栏上设置Bootstrap移动菜单的样式

  18. 18

    在导航栏上突出显示默认页面当前菜单

  19. 19

    如何使移动设备的导航栏菜单占据我设备屏幕的 100%

  20. 20

    如何在Bootstrap导航栏中加快移动设备下拉菜单?

  21. 21

    导航栏折叠菜单在移动设备和表格视口上不起作用

  22. 22

    CSS / Bootstrap-网站上的侧边栏更改为移动设备上的导航栏

  23. 23

    WordPress移动导航菜单:在iPhone和其他移动设备上单击可显示菜单,但在iPad上则单击

  24. 24

    如何默认导航抽屉在移动设备上关闭并在桌面上打开?

  25. 25

    如何折叠移动设备的导航栏?

  26. 26

    引导程序如何使导航栏上的图标在移动设备上不消失

  27. 27

    Bulma 更改导航菜单

  28. 28

    Bootstrap导航栏汉堡菜单无法打开

  29. 29

    导航栏菜单折叠未打开

热门标签

归档