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

Posted 2023-03-17

【中文标题】如何根据 Vuetify 中的屏幕大小更改对齐方式？

【英文标题】：How to change justify depending on the size of the screen in Vuetify?

【发布时间】：2021-10-05 04:39:30

【问题描述】：

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

【参考方案1】：

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

查看 vuetify 文档中的此链接：

vuetify flex classes documentation