如何使用 v-card 看到 v-row 的效果？

【问题标题】：How can I see the effect of v-row using v-card?如何使用 v-card 看到 v-row 的效果？
【发布时间】：2020-02-22 12:00:36
【问题描述】：

我想制作 2x2 v-card 对象。使用 vuetify

<v-row>
    <v-col>
      <v-btn width="100">asfd</v-btn>
      <v-btn width="100">adsf</v-btn>
    </v-col>
    <v-col>
      <v-card width="100">adsf</v-card>
      <v-card width="100">asdf</v-card>
    </v-col>
  </v-row>

如果 v-col 中有一个 v-btn，效果很好，但如果我将 v-btn 更改为 v -card，然后忽略 v-row 属性。请帮我。

【问题讨论】：

标签： vue-component vuetify.js

【解决方案1】：

这和vue无关，而是html。

v-btn 将解析为显示属性设置为inline-block 的html 按钮，这会将元素放置在同一行上。 v-card 将在一个 html div 中解析，该 div 的 display 属性设置为 block，这将把元素放在一起。

要正确定位元素，请查看https://vuetifyjs.com/en/styles/flex

<div id="app" >
  <v-app class="d-flex pa2">
    <v-row justify="space-around" align-items="align-stretch">
      <v-card width="50%">adsf</v-card>
      <v-card width="50%">bcde</v-card>
    </v-row>
    <v-row justify="space-around" align-items="align-stretch">
      <v-card width="50%">adsf</v-card>
      <v-card width="50%">bcde</v-card>
    </v-row
  </v-app>
 </div>

【讨论】：