Vuetify：如何安排几个 v-card-actions 按钮？

Question

我想在 Vuetify 中统一我的 v-card 的 v-card-actions。我的目标是将测试按钮置于我的 v-card 的中心，并将其放在类似的按钮上并共享“页脚”按钮。我想在我的 v-card 末尾放置 like 和 share 页脚，并在它们之间证明 space。

我尝试将带有 <v-flex class="d-flex justify-space-between mx-4">...</v-flex> 的“页脚”放入 v-card 操作中，并使用 CSS 参数 absolute 和 bottom，如另一个用户 https://codesandbox.io/s/vue-template-jsodz?fontsize=14 的回答中所述.但是按钮不再居中，点赞和分享按钮之间的 space 消失了。

如图所示，我想将页脚和测试按钮放在底部，但是当我尝试时，测试按钮没有居中，或者页脚按钮不再分开。这是迄今为止我得到的最好看的代码：

  <v-layout row wrap>
    <v-flex xs12 sm6 md4 lg3 v-for="project in filteredProjects" :key="project.title">
      <v-card class="ma-3" hover height="95%" >
        <v-card-text>
          ...
        </v-card-text>
        <v-card-actions>
          <v-col class="text-center">
            <v-btn class="green accent-4 white--text">                  
              <span class="">Test</span>                  
            </v-btn>
          </v-col>
        </v-card-actions>
        <v-flex class="d-flex justify-space-between mx-4">
          <div>
            <v-btn icon>
              <v-icon>thumb_up</v-icon>
            </v-btn>
            <span class="text-md-subtitle-2 black--text font-weight-bold ">{{ project.upvoteCount }}</span>
            <v-btn icon>
              <v-icon>thumb_down</v-icon>
            </v-btn>
            <span class="text-md-subtitle-2 black--text font-weight-bold ">{{ project.downvoteCount }}</span>
          </div>
          <div>
            <v-btn icon>
              <v-icon>share</v-icon>
            </v-btn>
            <span class="text-md-subtitle-2 black--text font-weight-bold">Teilen</span>
          </div>
        </v-flex>
      </v-card>
    </v-flex>
  </v-layout>

非常感谢您的提示！亲切的问候。

Answer 1

@FacelessTimma，可以使用来自 vuetify

的 css 助手将卡片操作移动到底部

您需要使用 d-flex 和 flex 方向来增长 flex-row 或 flex-column

重要的是使用 class="grow" 动态内容可以在您的卡片中增长

在下面的代码中，诀窍是使用 class="d-flex flex-row" 每列 class="d-flex flex-column" 在每张卡片中 class在每个 v-card-text 组件中“增长”

请找到下面的工作代码

<div id="app">
  <v-app id="inspire">
    <v-container class="grey lighten-5">
      <v-row>
    <v-col v-for="project in filteredProjects" :key="project.title" class="d-flex flex-row col-12 col-sm-6 col-md-4 col-lg-3">
      <v-card class="d-flex flex-column" hover width="100%">
        <v-card-text class="grow">
          {{project.description}}
         </v-card-text>
        <v-card-text class="pa-0">
          <v-col class="text-center">
            <v-btn class="green accent-4 white--text">                  
              <span class="">Test</span>                  
            </v-btn>
          </v-col>
          <v-row justify="space-around-between" class="ma-2">
            <v-col class="px-0">
              <v-btn icon>
              <v-icon>thumb_up</v-icon>
            </v-btn>
            <span class="text-md-subtitle-2 black--text font-weight-bold ">{{ project.upvoteCount }}</span>
            </v-col>
            <v-col class="px-0">
              <v-btn icon>
              <v-icon>thumb_down</v-icon>
            </v-btn>
            <span class="text-md-subtitle-2 black--text font-weight-bold ">{{ project.downvoteCount }}</span>
            </v-col>
            <v-col class="px-0"><v-btn icon>
              <v-icon>share</v-icon>
            </v-btn>
            <span class="text-md-subtitle-2 black--text font-weight-bold">Teilen</span></v-col>
          </v-row>
        </v-card-text>
      </v-card>
    </v-col>
  </v-row>
    </v-container>
  </v-app>
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
      return {
        filteredProjects: [
          {
            title: 'some title 1',
            description: 'some description some description some description some description some description some description some description some description',
            upvoteCount: 12,
            downvoteCount: 34,
          },
          {
            title: 'some title 2',
            description: 'some description',
            upvoteCount: 12,
            downvoteCount: 34,
          },
          {
            title: 'some title 3',
            description: 'some description',
            upvoteCount: 12,
            downvoteCount: 34,
          }
        ]
      }
  },
})

请在此处找到工作代码笔：https://codepen.io/chansv/pen/RwKRzqW

Vuetify：如何安排几个 v-card-actions 按钮？

Vuetify: How to arrange several v-card-actions buttons?

javascript

vue.js

vuetify.js