我正在尝试对齐卡片中的按钮。我的布局连续包含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>
这就是我现在的布局。.查看按钮。我希望它们对齐,而不管卡中提供的文本如何。
谢谢
最佳答案
只需将外部类添加到卡中:
<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
关于vue.js - 不论vuetify中的文字如何,如何使卡中的底部按钮对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56703740/