Question

Vuetify V2.1.9 Cant使用vuetify开发响应式导航栏设计。当我尝试使用以下代码进行编码时，我无法开发响应式导航栏设计。它不起作用。如果可以的话，请修复代码，这将有所帮助。提前致谢。编码愉快。我的要求就像正常的导航栏一样。当我在移动设备上打开网页时，它应该隐藏提示并显示汉堡菜单。

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

Answer 1

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

@仅媒体屏幕和（最大宽度：768px）{.nav_item { 显示：无！重要； }

Njaan oru sambavam aahtta：-）

我如何为Vuetify应用程序做出响应式导航栏设计

1 个答案: