Cómo especificar diferentes márgenes para diferentes tamaños de pantalla usando el punto de interrupción en Vuetify
Pregunta:
Tengo un bucle que muestra la cantidad especificada de tarjetas.
El problema es conma-5
atributo en<v-flex>
. Enxs
tamaño de pantalla este margen es demasiado grande. ¿Cómo especifico un margen diferente para diferentes tamaños de pantalla?
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6 md4 ma-5 v-for="card in filteredCards" :key="card.id">
<v-card flat class="elevation-20 test">
<v-card-media :src="card.image" height="200px">
</v-card-media>
<v-card-title primary-title class="pa-4">
<div>
<h3 class="headline mb-0">{{card.title}}</h3>
<div style="min-height:50px;">{{card.description}}</div>
</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-container>
Intentó:Intenté agregar este código a continuación (copiado deesta página)
<v-flex xs12 sm6 md4 v-for="card in filteredCards" :key="card.id"
:class="{'ma-0': $breakpoint.smAndDown, 'ma-5': $breakpoint.mdAndUp}">
y obtengo estos errores:
[Vue warn]: Property or method "$breakpoint" is not defined on the instance but referenced during render
[Vue warn]: Error in render: "TypeError: Cannot read property 'smAndDown' of undefined"
TypeError: Cannot read property 'smAndDown' of undefined