Vue.js 2.0(Vuetify)：如何将v-switch与v-btn对齐在v-card-subtitle右侧

要实现v-card-subtitle右侧的v-switch和Reload按钮同行且右对齐，你可以通过Vuetify的flex布局类调整，以下是修正后的代码和关键说明：

修正后的代码 #

<v-card>
    <v-card-title>
        ...
    </v-card-title>
    <v-card-subtitle class="d-flex justify-end align-center">
        <!-- 给switch添加右间距，和按钮区分开 -->
        <v-switch 
            v-model="ex11"
            label="Finished" 
            color="info"
            hide-details
            class="mr-3"
        ></v-switch>
        
        <!-- 用d-flex align-center确保文本和按钮垂直居中 -->
        <div class="d-flex align-center">
            Reload
            <v-btn icon color="primary" class="ml-1">
                <v-icon>mdi-reload</v-icon>
            </v-btn>
        </div>
    </v-card-subtitle>
</v-card>

关键调整点 #

• 给v-card-subtitle添加d-flex justify-end align-center：
  • d-flex将容器设为flex布局，让内部元素灵活排列
  • justify-end让所有元素靠右对齐
  • align-center确保元素在垂直方向上居中对齐
• 给v-switch加mr-3类，和右侧的Reload区域保持间距
• 把Reload文本和v-btn放在d-flex align-center的div里，保证文本和图标按钮垂直居中，避免错位
• 移除多余的v-row和v-col，简化布局结构

如果需要保留v-row结构，也可以这样写：

<v-card>
    <v-card-title>
        ...
    </v-card-title>
    <v-card-subtitle>
        <v-row class="justify-end align-center w-100">
            <v-switch 
                v-model="ex11"
                label="Finished" 
                color="info"
                hide-details
                class="mr-3"
            ></v-switch>
            
            <div class="d-flex align-center">
                Reload
                <v-btn icon color="primary" class="ml-1">
                    <v-icon>mdi-reload</v-icon>
                </v-btn>
            </div>
        </v-row>
    </v-card-subtitle>
</v-card>

这里要给v-row加w-100，让它占满v-card-subtitle的宽度，否则justify-end不会生效。

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