如何使用Vuetify网格系统循环显示卡组件？

Question

注：使用Vue.js和Vuetify.js的功能和造型

我有v-for动态产生的卡组件，我想在1/3/4卡（或多个）连续显示它们取决于屏幕尺寸（sm/md/lg）。当我将它们放置在Vuetify的网格系统中时，其中v-flex和v-layout元素会将卡片最小化，而不是移动到第二行。

还有其他方法可以解决吗？

<v-content> 
    <v-card class="d-inline-flex" v-for="company of companies" :key="company.name"> 
    <v-layout > 
     <v-flex md6 lg6> 
     <img class="company-logo" src="../assets/img/example-logo.png" alt="company logo"> 
     </v-flex> 
     <v-flex md6 lg6> 
     <v-card-title class="headline pl-0">{{company.name}}</v-card-title> 
     <article class="text-md-left text-lg-left"> 
      <v-btn @click="selectDashboard(href('stats', company.name))" :value="company.name"><v-icon>local_offer</v-icon></v-btn> 
      <v-btn @click="selectDashboard(href('process', company.name))" :value="company.name"><v-icon>notifications</v-icon></v-btn> 
      <v-btn @click="selectDashboard(href('example', company.name))" :value="company.name"><v-icon>rate_review</v-icon></v-btn> 
      <v-btn @click="selectDashboard(href('alerts', company.name))" :value="company.name"><v-icon>explore</v-icon></v-btn> 
      <v-btn @click="selectDashboard(href('profile', company.name))" :value="company.name"><v-icon>room</v-icon></v-btn> 
     </article> 
     </v-flex> 
    </v-layout> 
    </v-card> 
</v-content> 

对于视觉，这codepen显示图像的宽度尺寸减小（但高度尺寸保持不变） - https://codepen.io/johnjleider/pen/aLXBez?editors=1111

Answer 1

的<v-flex>格在12马克塞斯所以，如果你设置xs12（特小号断点）在<v-flex xs12>它将占用所有的网格宽度，直到它到达下一个断点（如果你没有设置另一个断点，最低的一个将被应用到所有的屏幕宽度，所以然后设置<v-flex xs12 md6>，现在当你点击中等断点每张卡将占用6个网格空间，这将允许您并排放置2张卡。设置lg3，可以让你在同一个空间装上4张牌。

您可以看到它在您的示例中的此修改中工作 https://codepen.io/twandy/pen/JrxamB?editors=1001