时间戳

首页 > 解决方案 > Vuetify 停止在小型显示器上缩小网站

vue.js - Vuetify 停止在小型显示器上缩小网站

问题描述

我在我的网络应用程序中使用 Vuetify。整个 web 应用程序都是响应式的。我的问题是，在较小的屏幕（智能手机、平板电脑）上，我可以缩小网站，这意味着我的网站右侧有一个空白区域。

我不知道这是怎么发生的，它出现在我的 Web 应用程序的每个页面中。我能做什么，我从一开始就使用整个空间，用户不能从网站缩小并在左边得到这个空白？

下面是一个简短的例子：

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row justify="center" align="center">
          <v-col cols="12" xs="10" sm="10" md="10" lg="10" xl="10">
            TEST_COL
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>


<script>

  export default {
    data: () => ({  
    }),
  }

</script>

<style>
</style>

也许问题出在 App.vue 文件中，但我没有看到任何问题。为了确保我在下面发布了 app.vue：

<template>
  <v-app>
    <Navbar />
    <v-main>
      <router-view></router-view>
    </v-main>
    <Footer />
  </v-app>
</template>

我在下面放了两张截图，所以你明白我的意思。

谢谢！克里斯

在此处输入图像描述

标签： vue.jsgridvuetify.jswhitespaceweb-project

解决方案

我得到了答案。我使用了<v-navigation-drawer>Vuetify 提供的来创建一个抽屉对象。我使用了以下选项：

<v-navigation-drawer v-model="drawer" absolute temporary right>

但是绝对意味着它“将位置：绝对应用于组件”。这意味着它在网站中占用了额外的空间。该选项必须是“固定的”而不是“绝对的”，然后它才能工作。

好的设置是：

<v-navigation-drawer v-model="drawer" fixed temporary right>

现在抽屉在网站的右侧打开（更适合智能手机），它不占用任何绝对空间！！

推荐阅读