如何根据 Vuetify 中的屏幕大小更改对齐方式？

问题描述

在我的应用程序中，我使用 justify="end" 的结尾对齐按钮。如果屏幕较小（例如平板电脑），我想将其更改为居中对齐 - justify="center"。

我的代码：

<template>
  <v-row  justify="end" >
    <v-col cols="5">
      <v-btn
        to="/"
        >Back</v-btn
      >
    </v-col>
  </v-row>
</template>

我也尝试使用类似这样的 css 样式，但它不起作用：

<style scoped>
@media (max-width: 800px) {
  .justify{
    justify: center;
  }
}
</style>

解决方法

您可以在 vuetify 中使用内置的 flex 类来代替 props，例如 .justify-md-center

查看 vuetify 文档中的此链接：

vuetify flex classes documentation