vuetify 上有卡片页脚/卡片组功能吗？答案

【问题标题】：Is there a card footer/ card deck feature on vuetify?vuetify 上有卡片页脚/卡片组功能吗？
【发布时间】：2020-02-21 16:24:48
【问题描述】：

我想做这样的：https://getbootstrap.com/docs/4.0/components/card/#card-groups

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

我的代码笔是这样的：

https://codepen.io/positivethinking639/pen/dyyWadg?editors=1010

  <v-container fluid>
    <v-row dense>
      <v-col
        v-for="card in cards"
        :key="card.title"
        :cols="card.flex"
      >
        <v-card>
          <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-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>

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

我该怎么做？

【问题讨论】：

我不熟悉 vuetify 但.theme--light.v-card { height: 100%;} 工作

标签： css vue.js vue-component vuetify.js

【解决方案1】：

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

在这里工作的代码笔：https://codepen.io/chansv/pen/ZEEKPaM?editors=1010

更新：添加了修复以在弹性卡片增长时将 v-card 操作移至底部

    <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 },
    ],
  }),
})

【讨论】：

【解决方案2】：

Vuetify 支持 flexbox https://vuetifyjs.com/en/styles/flex 所以你唯一要做的就是将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>

为了正确对齐项目中的内容：

将class="d-flex flex-column" 添加到v-card
将class="flex-grow-1" 添加到您的v-card-text
覆盖样式表 v-responsive（可能这也可以用更好的方式解决）
```
.v-responsive {
  flex: unset;  
}
```

https://codepen.io/reijnemans/pen/WNNjmJd

【讨论】：