Navbar Burger bulma无法使用bulm vue正确显示

Question

i使用bulma并添加Navbar，但是如果我遇到问题，如果此页面转到移动视图，则此navbar无法正确显示。就像这张图片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，所以会出错