如何在卡片中底部对齐按钮，而不考虑 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>

这就是我的布局现在的样子。看看按钮。无论卡片中提供的文本如何，我都希望它们对齐。

谢谢

原文由 abhigyan nayak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

并将卡片动作类添加到 v-card-actions

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

CSS：

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

codesandbox 上的实例： https ://codesandbox.io/s/vue-template-jsodz?fontsize=14

原文由 Kamal Alhomsi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以在您的 v-card d-flex flex-column --- 并在卡片操作之前添加 <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>

原文由 Thomasleveil 发布，翻译遵循 CC BY-SA 4.0 许可协议