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

Posted 2023-02-22

【中文标题】无论vuetify中的文本如何，如何在卡片中底部对齐按钮？

【英文标题】：How to bottom align button in card, irrespective of the text in vuetify?

【发布时间】：2019-11-04 07:44:42

【问题描述】：

我正在尝试对齐卡片中的按钮。我有一个布局，其中连续包含 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  >
        <v-img
          class="white"
          

          :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>  

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

谢谢

【参考方案1】：

您可以在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>

【讨论】：

这很好用。如果卡片大小不同，height="100%" 是必需的。

你也可以使用<v-card-actions class="mt-auto">来代替。

【参考方案2】：

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

<v-card hover  class="card-outter">

并将 card-actions 类添加到 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

【讨论】：

正是我发布的内容 - 伟大的思想都一样嘿;）请注意， 已经是position: relative

【参考方案3】：

在卡片底部添加边距，然后将按钮从底部绝对放置（也有一点边距）。

【讨论】：

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

【参考方案4】：

我只有一个对话框有同样的问题，所以我不需要绝对定位 - 只是为了将按钮保持在卡片的底部。

'不要搞乱样式和定位之类的东西，只需插入一个额外的<v-card-text></v-card-text>，Vue 就会自动添加按下按钮所需的填充。

不是最佳实践，但它快速且运行良好，特别是当您使用 Vue 的自动样式并且不想开始应用随机 css 时。

            <v-dialog v-model="dlgShow" max->
                <v-card min->  //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>