响应V-Card-Actions中的按钮

Question

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

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 example

在我目前的情况下，我可以使用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>

CodePen