Как выровнять кнопку снизу в карточке, независимо от текста в 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>  

Вот так сейчас выглядит мой макет .. Посмотрите на кнопку.Я хочу, чтобы они были выровнены независимо от текста на карточке.

Спасибо

Answer 1

Просто добавьте внешний класс на карту:

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

и добавление класса карточных действий к v-карточным действиям

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

css:

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

Живой пример для кодов и ящиков: https://codesandbox.io/s/vue-template-jsodz?fontsize=14

Answer 2

Добавьте поле внизу вашей карты, а затем расположите кнопки абсолютно снизу (тоже с небольшим отступом).