![Property Property](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了如何在Vuetify中使用断点为不同的屏幕尺寸指定不同的边距的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问题:
我有一个循环显示指定数量的卡片.
问题出在
中的 ma-5
属性上.在 xs
屏幕尺寸上,这个边距太大了.如何为不同的屏幕尺寸指定不同的边距?
代码:
<v-layout row wrap><v-flex xs12 sm6 md4 ma-5 v-for="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>
</v-card-title></v-card></v-flex></v-layout></v-容器>
尝试过:
我尝试在下面添加此代码(从 this 页面复制)
<v-flex xs12 sm6 md4 v-for="filteredCards 中的卡" :key="card.id":class="{'ma-0': $breakpoint.smAndDown, 'ma-5': $breakpoint.mdAndUp}">
我收到这些错误:
[Vue 警告]:属性或方法$breakpoint"未在实例上定义但在渲染期间被引用
[Vue 警告]:渲染错误:TypeError:无法读取未定义的属性‘smAndDown’"
TypeError:无法读取未定义的属性smAndDown"
解决方案
$vuetify.breakpoint.smAndDown
注意$vuetify
就你而言:
<v-flexv-for=已过滤卡片中的卡片";:key="card.id":class="{'ma-0': $vuetify.breakpoint.smAndDown, 'ma-5': $vuetify.breakpoint.mdAndUp}";xs12 sm6 md4>
检查 docs(断点对象)
Question:
I have a loop displaying specified amount of cards.
The problem is with ma-5
attribute in <v-flex>
. On xs
screen size this margin is too big. Ho do I specify a different margin for different screen sizes?
Code:
<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>
Tried:
I tried adding this code below (copied from this page)
<v-flex xs12 sm6 md4 v-for="card in filteredCards" :key="card.id"
:class="{'ma-0': $breakpoint.smAndDown, 'ma-5': $breakpoint.mdAndUp}">
and I get these errors:
[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
解决方案
$vuetify.breakpoint.smAndDown
Notice $vuetify
In your case:
<v-flex
v-for="card in filteredCards"
:key="card.id"
:class="{'ma-0': $vuetify.breakpoint.smAndDown, 'ma-5': $vuetify.breakpoint.mdAndUp}"
xs12 sm6 md4
>
Check docs (Breakpoint object)
这篇关于如何在Vuetify中使用断点为不同的屏幕尺寸指定不同的边距的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!