如何修复按钮，无论内容是否隐藏在Vuetify中的卡中

Question

https://codepen.io/Adellii/pen/VBEQbo?&编辑器=101

当用户单击单选按钮中的"是"时，当前代码会将按钮移到底部。我该如何把按钮固定在底部？

<div id="app">
<v-app id="inspire">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card height="280">
<v-radio-group  v-model="content">
<v-radio label="Yes"  value="yes" name="yes"></v-radio>
<v-radio label="No" value="no" name="no"></v-radio>
</v-radio-group>
<div class="x" v-show="content === 'yes'">
<v-text-field  label="Regular" placeholder="Placeholder"></v-text-field>
<v-text-field label="Regular" placeholder="Placeholder"></v-text-field>
</div>
<v-card-actions>
<v-btn flat color="orange">Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-app>
</div>

Answer 1

显然没有v-card组件道具可以实现这一点
所以只需添加一些css：

.flexcard {
display: flex;
flex-direction: column;
}
<v-card class="flexcard">

Codepen

请注意，这适用于您提供的将按钮放置在底部的示例。如果你的CSS在你的项目中不同，我不确定你想对卡片中的其他元素做什么。因此，您可能需要将<v-spacer></v-spacer>、class="grow"或class="shrink"之类的内容添加到v-card中的一些元素中，以适应您的风格
具有更大v卡高度的示例