navbar示例Bulma不在mobile Blazor上工作

navbar示例Bulma不在mobile Blazor上工作,mobile,navbar,blazor,bulma,Mobile,Navbar,Blazor,Bulma,我从Blazor网站的Bulma网站复制了这个示例navbar。在网页上,它工作正常,但在手机上,navbar汉堡没有响应。我是否错过了这一过程中至关重要的一步?例如,我需要用.css做些什么吗 <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="h

我从Blazor网站的Bulma网站复制了这个示例navbar。在网页上,它工作正常,但在手机上,navbar汉堡没有响应。我是否错过了这一过程中至关重要的一步?例如,我需要用.css做些什么吗

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="https://bulma.io">
            <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
        </a>

        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-start">
            <a class="navbar-item">
                Home
            </a>

            <a class="navbar-item">
                Documentation
            </a>

            <div class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link">
                    More
                </a>

                <div class="navbar-dropdown">
                    <a class="navbar-item">
                        About
                    </a>
                    <a class="navbar-item">
                        Jobs
                    </a>
                    <a class="navbar-item">
                        Contact
                    </a>
                    <hr class="navbar-divider">
                    <a class="navbar-item">
                        Report an issue
                    </a>
                </div>
            </div>
        </div>

        <div class="navbar-end">
            <div class="navbar-item">
                <div class="buttons">
                    <a class="button is-primary">
                        <strong>Sign up</strong>
                    </a>
                    <a class="button is-light">
                        Log in
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>

家
文档
更多
关于
乔布斯
接触

报告问题 注册 登录
您是否已将所有脚本和链接包含到index.html中?您是否尝试过硬刷新(Ctrl+F5Ctrl+Shirt+R)?您的程序.cs与他们的相同吗


如果以上都不起作用,你能提供完整的代码库吗?最好是git或zip

这是因为Bulma没有任何JavaScript,所以您需要在
navbar burger
和目标
navbar菜单上切换类
处于活动状态

在中有一些实现示例,我个人使用的jQuery实现非常有效:

 $(document).ready(function() {

  // Check for click events on the navbar burger icon
  $(".navbar-burger").click(function() {

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      $(".navbar-burger").toggleClass("is-active");
      $(".navbar-menu").toggleClass("is-active");

  });
});
但是如果您愿意,文档中还有一个普通的Javascript实现