我正在尝试使用 Vue 制作扩展卡片，问题是当扩展卡片时，右边的卡片会创建一个空 space

Question

我正在尝试使用 Vue 制作扩展卡片，问题是当扩展卡片时，右边的卡片会创建一个空的 space，整个底行都下降了，我只想正下方的卡往下走，不是全部。

这是目前的样子：

这是我想要的方式：

这是我认为控制这个的代码部分，或者它会在扩展部分吗？

<v-container class="pt-0 mt-0">
  <v-layout row wrap>
    <v-flex
      xs12
      md6
      lg3
      v-for="stateCard in filteredSearch"
      :key="stateCard.name"
    >
      <MakeTheCard :item="infoCard" />
        
      
    </v-flex>
  </v-layout>
</v-container>

Answer 1

我认为您有 CSS 问题而不是 Vue。

一种方法是用 columns 制作一个 flex 容器，每个容器包含 X 数量的元素。

像这样：

  <div class="row">
    <div class="col">
      <Card v-for="card in 2" :key="card" />
    </div>
    <div class="col">
      <Card v-for="card in 2" :key="card" />
    </div>
    <div class="col">
      <Card v-for="card in 1" :key="card" />
    </div>
  </div>

刚刚为您制作了一个演示：https://codesandbox.io/s/withered-leaf-mv8lp

我正在尝试使用 Vue 制作扩展卡片，问题是当扩展卡片时，右边的卡片会创建一个空 space

I'm trying to make expanding cards using Vue, the problem is that when expanding a card, the cards on the right create an empty space

html

javascript

vue.js

vuetify.js