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

Answer 3

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

Answer 4

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

“一团糟的样式，位置和内容，只需插入一个额外的<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>，Vue会自动添加按下按钮所需的填充。

这不是最佳实践，但是它很快并且可以正常运行，尤其是当您使用Vue的自动样式并且不想开始应用随机CSS时。

forecast

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

4 个答案: