使v卡动作中的按钮响应

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 example

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

Vue版本：2.6.10 验证：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