Vuetifyグリッドシステムでループ内にカードコンポーネントを表示する方法は？

Question

注：機能性とスタイリングのためVue.jsとVuetify.jsを使用して

私は、動的にv-forで生成されたカードのコンポーネントを持っている、と私は、行の1/3/4カード（S）でそれらを表示したいです画面サイズ（sm/md/lg）によって異なります。 Vuetifyのグリッドシステムに、v-flexとv-layoutの要素を配置すると、2番目の行に移動するのではなく、カードが最小化されます。

これについて別の方法がありますか？ Visualの

<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は、画像に幅サイズの減少を示している（ただし、高さ寸法は同じまま） - あなたはxs12（余分な小さなを設定した場合https://codepen.io/johnjleider/pen/aLXBez?editors=1111

Answer 1

<v-flex>グリッドだから12でアウトmaxesブレークポイント）は、次のブレークポイントに達するまですべてのグリッド幅を占有します（別のブレークポイントを設定しない場合は、最小のものがすべての画面幅に適用されます）。<v-flex xs12 md6>を設定します。中位のブレークポイント各カードは6つのグリッドスペースを占有し、2枚のカードを並べることができます。は、4つのカードを同じスペースに収めることができます。

あなたの例にこの変更を加えても動作することがわかります https://codepen.io/twandy/pen/JrxamB?editors=1001