使 v-card-actions 中的按钮响应式

Question

我有一个v-card带有三个按钮 ( v-btn)的按钮v-card-actions，每个按钮上都有很长的文本。这基本上没有问题，但是当在小屏幕上查看时，这些按钮没有响应，它们仍然从左到右而不是从上到下对齐，因此最右边的按钮被剪切：

HTML：

<div id="app">
  <v-app>
    <v-card>
      <v-card-title>
        Foo!
      </v-card-title>
      <v-card-text>
        Bar!
      </v-card-text>
      <v-card-actions>
        <v-btn>VeryLongText</v-btn>
        <v-btn>SpamSpamSpam</v-btn>
        <v-btn>Wrzlbrnft</v-btn>
      </v-card-actions>
    </v-card>
  </v-app>
</div>

JS：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
  })
})

Codepen 示例

在我目前的情况下，我可以通过使用来规避这个问题small，例如<v-btn small>Verylongtext</v-btn>，但我想知道如何使其完全响应。

Vue 版本：2.6.10 Vuetify：2.1.14

Answer 1

使用网格怎么样？

<div id="app">
  <v-app>
    <v-card>
      <v-card-title>
        Foo!
      </v-card-title>
      <v-card-text>
        Bar!
      </v-card-text>
      <v-card-actions>
        <v-container>
          <v-row dense>
            <v-col><v-btn class="button__full">VeryLongText</v-btn></v-col>
            <v-col><v-btn class="button__full">SpamSpamSpam</v-btn></v-col>
            <v-col><v-btn class="button__full">Wrzlbrnft</v-btn></v-col>
          </v-row>
        </v-container>
      </v-card-actions>
    </v-card>
  </v-app>
</div>

代码笔