无论vuetify中的文本如何，如何底部对齐卡片中的按钮？

Question

我正在尝试对齐卡片中的按钮。我有一个布局，其中连续包含 3 张卡片。但是，问题是，当我在卡片中添加文本时，特定卡片中按钮的位置会发生变化。

我尝试过传递不同的道具并尝试使用不同的类。但它对我不起作用

这是代码：

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

您可以添加类d-flex flex-column上的v-card，并添加<v-spacer></v-spacer>卡操作之前。

      <v-card class="d-flex flex-column">
        <v-card-title>
          ...
        </v-card-title>
        <v-spacer></v-spacer>
        <v-card-actions>
          ...
        </v-card-actions>
      </v-card>

Answer 2

只需在卡片中添加一个外部类：

<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;
}

关于codesandbox的实时示例：https ://codesandbox.io/s/vue-template-jsodz ? fontsize =14