Vuetify 3+Vue 3实现右侧并排3个v-switch组件的问题

要实现三个v-switch在页面右侧并排的效果，只需对现有代码做两处关键调整：

修改方案 #

1. 让开关组自动靠右：给包含开关的内部v-row添加ml-auto类，利用CSS自动填充左侧空间，将开关组推至右侧
2. 确保垂直对齐与间距：给外层v-row添加align="center"属性保证按钮与开关垂直居中，同时给前两个v-switch添加mr-3类设置横向间距

修改后的完整代码 #

<template>
  <v-card variant="outlined" class="pa-6 ma-3" color="#BDBDBD">
    <v-row class="pa-0 ma-0" align="center">
      <v-btn
        color="primary"
        class="mr-2"
        :loading="loading"
        :disabled="loading"
      >
        Atualizar
      </v-btn>
      <v-btn color="error" :disabled="selected.length == 0" class="mr-2">
        Plotar
      </v-btn>
      <v-btn color="warning" :disabled="selected.length == 0" class="mr-3">
        Favoritar
      </v-btn>
      <!-- ml-auto 使开关组靠右 -->
      <v-row class="black-label ml-auto">
        <v-switch
          label="Intraday"
          v-model="intraday"
          color="primary"
          hide-details
          class="mr-3"
        ></v-switch>
        <v-switch
          label="Stocks"
          v-model="stocks"
          color="primary"
          hide-details
          class="mr-3"
        ></v-switch>
        <v-switch
          label="Favorites"
          v-model="favorites"
          color="primary"
          hide-details
        ></v-switch>
      </v-row>
    </v-row>
  </v-card>
</template>

<script setup>
import { ref } from 'vue'
const search = ref('')
const selected = ref([])
const intraday = ref(false)
const favorites = ref(false)
const stocks = ref(false)
const loading = ref(false)
const msg = ref('Hello World!')
</script>

关键修改说明 #

• align="center"：让外层行内的按钮和开关组保持垂直对齐，避免视觉上的错位
• ml-auto：这是实现靠右布局的核心，通过自动设置左侧margin为auto，让开关组占据剩余的左侧空间，从而固定在右侧
• mr-3：给前两个开关添加右侧间距，保证开关之间有合适的留白，最后一个开关无需添加，避免多余的右侧空白

内容的提问来源于stack exchange，提问作者William