如何在同一行的 v-card-text 旁边的 v-card 上放置 v-btn？

Question

我在 Vue 2 中使用 Vuetify 2。这是一些代码：

<template>
<v-container fluid outlined class = "pt-0 pl-0">
<v-row no-gutters>  
<v-col>
 <v-sheet id="card-1" elevation=0 
   class = "pt-1 pb-0 pl-0 ma-0 black md-2 rounded-0" max-width='500px' >
   <v-card-text class="text-h4 yellow--text font-weight-medium pt-0 pb-0 ma-0">
   Last Refresh:
     </v-card-text>   
   <v-card-text class="text-h3 white--text pt-0 pb-2 ma-0">
   {{lastrefresh}}
     </v-card-text> 
 <v-btn
   color="red"
   dark
   medium
   class="mt-2 mr-4">
   Refresh Data
 </v-btn>
 <v-btn
   color="green"
   dark
   medium
   class="mt-2 mr-4">
   Select Date
 </v-btn>
 </v-sheet>
</v-col>
</v-row>
</v-container>
</template>

生成的内容如下：

我需要的是红色按钮紧靠文本的右侧，绿色按钮位于红色按钮的右侧。两个按钮共享黑色背景。

我怎样才能做到这一点？

Answer 1

您可以通过将 row 分成 col 来实现此目的。

这是我的代码：-

    <v-row no-gutters  class = "pt-1 pb-0 pl-0 ma-0 black">  
<v-col>
 <v-sheet id="card-1" elevation=0 
    max-width='500px' class = "pt-1 pb-0 pl-0 ma-0 black md-2 rounded-0" >
   <v-card-text class="text-h4 yellow--text font-weight-medium pt-0 pb-0 ma-0">
   Last Refresh:
     </v-card-text>   
   <v-card-text class="text-h3 white--text pt-0 pb-2 ma-0">
   {{lastrefresh}}
     </v-card-text> 
   </v-col>
  <v-col >
 <v-btn
   color="red"
   dark
   medium
   class="mt-2 mr-4">
   Refresh Data
 </v-btn>
 <v-btn
   color="green"
   dark
   medium
   class="mt-2 mr-4">
   Select Date
 </v-btn>
 </v-sheet>
</v-col>
</v-row>

this 是代码笔的 link。

如何在同一行的 v-card-text 旁边的 v-card 上放置 v-btn？

How to place a v-btn on v-card next to v-card-text on same row?

vuejs2

vuetify.js