Css vuetify上是否有卡尾/卡组功能？

我想这样做：

所以我希望即使描述发生变化，盒子的高度保持不变

我的代码笔是这样的：

心脏
mdi书签
mdi共享变量

我希望高度卡保持不变，尽管描述不同

我该怎么做？

Vuetify支持flexbox 因此，您唯一要做的就是将

class=“d-flex”

添加到v-col中

<v-container fluid>
    <v-row dense>
      <v-col
        v-for="card in cards"
        :key="card.title"
        :cols="card.flex"
        class="d-flex"
      >
        <v-card class="d-flex flex-column">
          <v-img
            :src="card.src"
            class="white--text align-end"
            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
            height="200px"
          >

          </v-img>
          <v-card-text v-text="card.title" class="flex-grow-1"></v-card-text>
          <v-card-actions>

            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-bookmark</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-share-variant</v-icon>
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>

---

上面的代码看起来不错，只需将d-flex类添加到行内的列中，使其具有与其他列相同的高度即可

在此处使用代码笔：

更新：添加了修复程序，可在flex卡增长时将v卡操作移到底部

    <div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      max-width="500"
    >
      <v-system-bar
        color="indigo darken-2"
        dark
      >
        <v-spacer></v-spacer>

        <v-icon>mdi-window-minimize</v-icon>

        <v-icon>mdi-window-maximize</v-icon>

        <v-icon>mdi-close</v-icon>
      </v-system-bar>

      <v-toolbar
        color="indigo"
        dark
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Discover</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </v-toolbar>

      <v-container fluid>
        <v-row dense>
          <v-col
            v-for="card in cards"
            :key="card.title"
            :cols="card.flex"
            class="d-flex"
          >
            <v-card class="d-flex flex-column">
              <v-img
                :src="card.src"
                class="white--text align-end"
                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
                height="200px"
              >

              </v-img>
              <v-card-text v-text="card.title"></v-card-text>
              <v-spacer></v-spacer>
              <v-card-actions>

                <v-btn icon>
                  <v-icon>mdi-heart</v-icon>
                </v-btn>

                <v-btn icon>
                  <v-icon>mdi-bookmark</v-icon>
                </v-btn>

                <v-btn icon>
                  <v-icon>mdi-share-variant</v-icon>
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    cards: [
      { title: 'Pre-fab homes aaaaaaaaaaaaaaaaaa', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 4 },
      { title: 'Favorite roaddddddddd', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 4 },
      { title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 4 },
    ],
  }),
})

mdi窗口最小化
mdi窗口最大化
mdi关闭
发现
mdi放大
心脏
mdi书签
mdi共享变量
新Vue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据：（）=>({
卡片：[
{标题：'Pre-fab homes aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaahttps://cdn.vuetifyjs.com/images/cards/house.jpg，flex:4}，
{标题：'最喜欢的路dddd'，src:'https://cdn.vuetifyjs.com/images/cards/road.jpg，flex:4}，
{标题：“最佳航空公司”，src:'https://cdn.vuetifyjs.com/images/cards/plane.jpg，flex:4}，
],
}),
})

我不熟悉vuetify，但是

.theme--light.v-card{height:100%；}

很管用

.v-responsive {
  flex: unset;  
}

    <div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      max-width="500"
    >
      <v-system-bar
        color="indigo darken-2"
        dark
      >
        <v-spacer></v-spacer>

        <v-icon>mdi-window-minimize</v-icon>

        <v-icon>mdi-window-maximize</v-icon>

        <v-icon>mdi-close</v-icon>
      </v-system-bar>

      <v-toolbar
        color="indigo"
        dark
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Discover</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </v-toolbar>

      <v-container fluid>
        <v-row dense>
          <v-col
            v-for="card in cards"
            :key="card.title"
            :cols="card.flex"
            class="d-flex"
          >
            <v-card class="d-flex flex-column">
              <v-img
                :src="card.src"
                class="white--text align-end"
                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
                height="200px"
              >

              </v-img>
              <v-card-text v-text="card.title"></v-card-text>
              <v-spacer></v-spacer>
              <v-card-actions>

                <v-btn icon>
                  <v-icon>mdi-heart</v-icon>
                </v-btn>

                <v-btn icon>
                  <v-icon>mdi-bookmark</v-icon>
                </v-btn>

                <v-btn icon>
                  <v-icon>mdi-share-variant</v-icon>
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    cards: [
      { title: 'Pre-fab homes aaaaaaaaaaaaaaaaaa', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 4 },
      { title: 'Favorite roaddddddddd', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 4 },
      { title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 4 },
    ],
  }),
})