Vue.js 无论vuetify中的文本是什么，如何在卡片中底部对齐按钮？

我正试图在我的卡片上对齐按钮。我有一个布局，其中包含一行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>  

{{item.name}
{{item.description}}
更多

这就是我现在的布局。。看这个按钮。我希望它们对齐，而不考虑卡片中提供的文本

---

谢谢

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

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

codesandbox上的实时示例：

---

在卡的底部添加边距，然后将按钮完全从底部放置（也有一点边距）

---

您可以在

v-card

上添加类

d-flex-column

，并在卡操作之前添加

...
...

我只有一个对话框有同样的问题，所以我不需要绝对定位——只需将按钮保持在卡的底部即可

不必再搅乱样式、定位等，只需插入一个额外的

，Vue就会自动添加按下按钮所需的填充

这不是最好的做法，但它很快，工作正常，特别是当您使用Vue的自动样式，不想开始应用随机css时

            <v-dialog v-model="dlgShow" max-width="290">
                <v-card min-height="220">  //this causes the problems
                    <v-card-title>Confirmation required</v-card-title>
                    <v-card-text>Are you sure you want to delete this?</v-card-text>
                    <v-card-text></v-card-text>  //and here's the fix
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn @click="dlgShow = false">No, cancel</v-btn>
                        <v-btn color="primary" @click="myFunc">Yes, delete</v-btn>
                        <v-spacer></v-spacer>
                    </v-card-actions>
                </v-card>
            </v-dialog>

//这就产生了问题
需要确认
是否确实要删除此项？
//这是解决办法
不，取消
是，删除

这正是我所发布的内容——伟大的思想都是一样的（嘿；）请注意，已经是

位置：relative

在这种情况下没有区别，但最好是在卡片上添加填充，而不是边距（就像@kamal alhomsi在他的回复中所做的那样）-只是为了在逻辑上保持一致。在这种情况下，它没有区别的原因是

fill height

属性扩展为包含膨胀的边距。这很好地工作

height=“100%”

如果卡的尺寸不同，则必须使用。

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

            <v-dialog v-model="dlgShow" max-width="290">
                <v-card min-height="220">  //this causes the problems
                    <v-card-title>Confirmation required</v-card-title>
                    <v-card-text>Are you sure you want to delete this?</v-card-text>
                    <v-card-text></v-card-text>  //and here's the fix
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn @click="dlgShow = false">No, cancel</v-btn>
                        <v-btn color="primary" @click="myFunc">Yes, delete</v-btn>
                        <v-spacer></v-spacer>
                    </v-card-actions>
                </v-card>
            </v-dialog>