Q-card column not distributing equally
-
Hi, i tried to use q-card in my v-for loop, i want my card to display 4 cards per row, but its not working. I dont see any errors on my code, and i tried this in bootstrap and its working
here is my full component of ramen code :
code_text ```<template> <div class="q-mt-md q-mx-sm"> <div class="row"> <q-badge transparent align="middle" color="amber-3"> <span class="text-h5 text-black">Ramen</span> </q-badge> </div> <div class="q-pa-md row q-gutter-sm"> <q-card v-for="(item,index) in items" :key="index" class="q-ma-md text-black col-xs-12 col-md-4 col-lg-3" > <q-card-section> <div class="text-h6">{{item.title}}</div> </q-card-section> <q-separator inset /> <q-card-section>{{item.description}}</q-card-section> <img :src="item.img" height="350px" /> <q-separator class="q-my-md" inset /> <q-card-actions> <q-btn>View</q-btn> </q-card-actions> <q-card-section class="align-right">PHP {{item.price}}</q-card-section> </q-card> </div> </div> </template>
-
@jarvilito remove the gutters (docs states it adds margins), also remove your card margin classes, wrap your q-cards inside a div instead and give it a padding.
like this https://codepen.io/metalsadman/pen/eYmgLmy?&editable=true&editors=111 -
@metalsadman Thanks metal man! It works