使用bulma vue时，Navbar Burger bulma不能正确显示

Question

我使用bulma和添加导航栏，但如果我有问题，如果这个页面转到移动视图，这个导航栏不能正确显示。这就像这张图片上的link。我不知道发生了什么，在这个bulma.io上，如果我要移动查看它的正确显示。这是我的导航栏

    <template>

   <nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
      <a class="navbar-item">

      <router-link to="/"><img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"> 
 </router-link>
    </a>

    <div class="navbar-burger" @click="showNav = !showNav" :class="{ 'is-active': showNav }">

      <span></span>
      <span></span>
      <span></span>

    </div>
    </div>

     <div class="navbar-menu" :class="{ 'is-active': showNav }">
      <div class="navbar-start">
      <a class="navbar-item">
       <router-link to="/">Home</router-link>
      </a>

      <a class="navbar-item">
        <router-link to="/about">About</router-link>
      </a>

    </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>

</template>

<script>
    export default {
          data: function() {
        return {
            showNav: false
        }
      }
    }
</script>

我认为这不是有问题，但我在浏览器上的视图不能正确显示这张图片。有人能帮上忙吗？

Answer 1

这个问题已经解决了。我没有在我的模板上使用html:5，所以这是一个错误