vue.js - 如何为我的 vuetify 应用程序制作响应式导航栏设计

Question

Vuetify V2.1.9 无法使用 vuetify 开发响应式导航栏设计。当我尝试使用以下代码进行编码时，我无法开发响应式导航栏设计。它不工作。如果你能修复代码，它会很有帮助。提前致谢 。有一个快乐的编码。我的要求就像一个正常的导航栏工作。当我在移动设备中打开页面时，它应该隐藏ment并显示汉堡菜单。

<v-navigation-drawer v-model="sideNav" absolute temporary>
  <v-list-item-content class="hidden-sm-and-up">
    <v-list dense>
      <v-list-item v-for="item in guestNav" :key="item.name" link>
        <v-list-item-icon>
          <v-icon>mdi-user</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ item.name }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-list-item-content>
</v-navigation-drawer>
<v-toolbar color="#00A972" dark height="50px">
  <v-spacer></v-spacer>
  <v-toolbar-title>
    <h5 style="font-weight: 500;">Projects</h5>
  </v-toolbar-title>
  <v-app-bar-nav-icon @click.native="sideNav = !sideNav" class="hidden-sm-and-up"></v-app-bar-nav-icon>

  <div class="flex-grow-1"></div>
  <v-spacer></v-spacer>
  <v-toolbar-items class="hidden-sm-and-up">
    <v-row justify="center">
      <v-btn
        text
        :ripple="false"
        color="white"
        style="margin-top:7px;margin-right:20px;font-weight:400"
      >HOME</v-btn>
      <v-spacer></v-spacer>
    </v-row>
  </v-toolbar-items>
  <v-spacer></v-spacer>

  <v-toolbar-items>
    <v-row justify="center">
      <v-btn
        text
        :ripple="false"
        color="white"
        style="margin-top:7px;margin-right:20px;font-weight:400"
      >STORE</v-btn>
      <v-spacer></v-spacer>
    </v-row>
  </v-toolbar-items>
  <v-spacer></v-spacer>

  <v-toolbar-items>
    <v-row justify="center">
      <v-btn
        text
        :ripple="false"
        color="white"
        style="margin-top:7px;margin-right:20px;font-weight:400"
      >WALLET</v-btn>
      <v-spacer></v-spacer>
    </v-row>
  </v-toolbar-items>
  <v-spacer></v-spacer>
  <v-toolbar-items>
    <v-row justify="center">
      <v-btn
        text
        :ripple="false"
        color
        style="margin-top:7px;margin-right:20px;font-weight:400"
      >LOG IN</v-btn>
      <v-btn
        text
        :ripple="false"
        class="green"
        dark
        style="margin-top:7px;margin-right:20px;font-weight:400;background-color: #38B98A!important;"
      >SIGN UP</v-btn>
      <v-spacer></v-spacer>
    </v-row>
  </v-toolbar-items>
</v-toolbar>

标签： vue.jsresponsive-designnavbarvuetify.js

Answer 1

使用媒体查询使导航栏响应如下

@media only screen and (max-width: 768px) { .nav_item { display: none !important; } }