如何在Vuetify中使用断点为不同的屏幕尺寸指定不同的边距 [英] How to specify different margin for different screen sizes using breakpoint in 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中使用断点为不同的屏幕尺寸指定不同的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！