Vuetify：在卡片中的图标旁边放置标题/副标题

【问题标题】：Vuetify : place title/subtitle next to icon in a cardVuetify：在卡片中的图标旁边放置标题/副标题
【发布时间】：2022-01-19 16:08:02
【问题描述】：

我有一个卡片组件，我正试图将我的标题、副标题放在我的图标右侧。它有些如何一直到下一行。我是 Vuetify 的新手。

<template>
    <v-container fluid class="my-5">
        <v-row>
            <v-flex col-xs-12>
                <v-card elevation="2" class="pa-5">
                    <v-flex xs3>
                        <v-btn text color="black">
                            <v-icon left large class="mr-5">{{ icon }}</v-icon>
                        </v-btn>
                    </v-flex>
                    <v-flex xs9>
                        <v-card-title>
                            {{ title }}
                        </v-card-title>

                        <v-card-subtitle> {{ subtitle }} </v-card-subtitle>
                    </v-flex>
                </v-card>
            </v-flex>
        </v-row>
    </v-container>
</template>
<script>
export default {
    name: 'MainPanel',
    props: {
        icon: String,
        title: String,
        subtitle: String
    }
}
</script>
<style></style>

请告诉我如何才能做到这一点。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

将d-flex 类应用到v-card，在元素上设置display:flex，使其内容水平对齐：

<v-card elevation="2" class="pa-5 d-flex">
                                      ?

demo 1

或者，将v-card 的内容包装在v-row 中（并将已弃用的v-flex 替换为v-col）：

<v-card>
  <v-row>
    <v-col>...</v-col>
    <v-col>...</v-col>
  </v-row>
</v-card>

demo 2

【讨论】：