Comment afficher les composants de la carte en boucle avec le système de grille Vuetify?

Question

Note: L'utilisation Vue.js et Vuetify.js pour la fonctionnalité et le style

J'ai des composants de cartes générées dynamiquement avec v-for, et je veux les afficher dans la carte 1/3/4 (s) dans une rangée en fonction de la taille de l'écran (sm/md/lg). Quand je les place dans le système de grille de Vuetify, avec v-flex et v-layout éléments, les cartes sont minimisées, au lieu de passer à la deuxième rangée.

Existe-t-il une autre façon de procéder?

<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> 

Pour une taille visuelle, ce codepen montre la largeur des images diminue (mais la taille de la hauteur reste le même) - https://codepen.io/johnjleider/pen/aLXBez?editors=1111

Answer 1

La grille <v-flex> plafonne à 12. Donc, si vous définissez xs12 (très petit point de rupture) sur le <v-flex xs12> il prendra toute la largeur de la grille jusqu'à ce qu'il atteigne le point d'arrêt suivant (Si vous ne définissez pas un autre point d'arrêt, le plus bas sera appliqué à toutes les largeurs d'écran. point d'arrêt moyen chaque carte prendra 6 espaces de grille, ce qui vous permettra d'avoir 2 cartes côte à côte., vous permettra d'ajuster 4 cartes dans le même espace.

Vous pouvez le voir travailler dans cette modification à votre exemple https://codepen.io/twandy/pen/JrxamB?editors=1001