如何使用 Vuetify 中的断点为不同的屏幕尺寸指定不同的边距

Question

问题：

我有一个循环显示指定数量的卡片。

问题出在 <v-flex> 中的 ma-5 属性。在 xs 屏幕尺寸上，此边距太大。如何为不同的屏幕尺寸指定不同的边距？

代码：

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

尝试过：

我尝试在下面添加此代码（从 this 页面复制）

<v-flex xs12 sm6 md4 v-for="card in filteredCards" :key="card.id"
   :class="{'ma-0': $breakpoint.smAndDown, 'ma-5': $breakpoint.mdAndUp}">

我收到这些错误：

[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

Answer 1

$vuetify.breakpoint.smAndDown

通知$vuetify

你的情况：

<v-flex 
    v-for="card in filteredCards"
    :key="card.id"
    :class="{'ma-0': $vuetify.breakpoint.smAndDown, 'ma-5': $vuetify.breakpoint.mdAndUp}"
    xs12 sm6 md4  
>

检查docs（断点对象）

Answer 2

助手类在给定的断点处应用边距或填充。这些类可以使用以下格式应用：{属性}{direction}-{breakpoint}-{size}.

Answer 3

现在有更简单的方法：

<v-card 
  v-for="card in filteredCards"
  :key="card.id"
  class="ma-0 ma-md-5"
>
{{card.title}}
</v-card>

这对 XS 和 SM 应用 0 边距，对 MD 及以上应用边距 5

如何使用 Vuetify 中的断点为不同的屏幕尺寸指定不同的边距

How to specify different margin for different screen sizes using breakpoint in Vuetify

vuetify.js

问题：

代码：

尝试过：