vue.js - 不论vuetify中的文字如何，如何使卡中的底部按钮对齐？

Question

我正在尝试对齐卡片中的按钮。我的布局连续包含3张卡片。但是，问题是，当我在卡中添加文本时，按钮的位置在特定卡中会更改。

我尝试传递不同的 Prop ，并尝试使用不同的类。但这对我没有用

这是代码:

CardRenderer.vue:

<v-container grid-list-sm>
    <v-layout wrap>

    <v-flex xs12 sm4 v-for="(item, index) in renderData" v-bind:key="index">

      <v-card hover height="100%" >
        <v-img
          class="white"
          height="200px"

          :src="item.icon"
        >
          <v-container >
            <v-layout fill-height>
              <v-flex xs12 align-end flexbox >
                <!-- <span class="headline black--text">{{ item.name }}</span> -->
              </v-flex>
            </v-layout>
          </v-container>
        </v-img>
        <v-card-title>
          <div>
            <p class="headline black--text">{{ item.name }}</p>
            <!-- <span class="grey--text">Number 10</span><br> -->
            <!-- <span>Whitehaven Beach</span><br> -->
            <span>{{ item.description }}</span>
          </div>
        </v-card-title>
        <v-card-actions>
          <!-- <v-btn flat color="orange">Share</v-btn> -->

          <v-btn  :href="'/dashboard/'+item.name" color="primary">More!</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex> 

    </v-layout>
    </v-container>  

这就是我现在的布局。.查看按钮。我希望它们对齐，而不管卡中提供的文本如何。

谢谢

Answer 1

只需将外部类添加到卡中:

<v-card hover height="100%" class="card-outter">

并将card-actions类添加到v-card-actions

<v-card-actions class="card-actions">

css:

.card-outter {
  position: relative;
  padding-bottom: 50px;
}
.card-actions {
  position: absolute;
  bottom: 0;
}

在codeandbox上的实时示例:
https://codesandbox.io/s/vue-template-jsodz?fontsize=14