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

Question

在我的应用程序中，我使用 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>

Answer 1

而不是 props 你可以在 vuetify 中使用内置的 flex 类就像 .justify-md-center

看看 vuetify 文档中的 link：

vuetify flex classes documentation

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

How to change justify depending on the size of the screen in Vuetify?

css

vue.js

vuetify.js

justify