Vuetify에서 중단점을 사용하여 화면 크기에 따라 마진을 다르게 지정하는 방법

Vuetify에서 중단점을 사용하여 화면 크기에 따라 마진을 다르게 지정하는 방법

질문:.

나는 특정한 양의 카드를 보여주는 루프를 가지고 있다.

문제는 에 있다.ma-5에 속하다.<v-flex>. onxs스크린 사이즈가 너무 크다.Ho 화면 크기에 따라 마진을 다르게 지정하시겠습니까?

코드:

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

시도됨:

---

아래에 이 코드를 추가하려고 시도했다(이 페이지에서 복사됨)

<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

---

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

문서 확인(Breakpoint 객체)

도우미 클래스는 주어진 중단점에 여백 또는 패딩을 적용한다.이러한 클래스는 {property}{direction}-{breakpoint}-{size} 형식을 사용하여 적용할 수 있다.

이제 더 쉬운 방법이 있다.

<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의 마진을 적용한다.

참조URL: https://stackoverflow.com/questions/48137224/how-to-specify-different-margin-for-different-screen-sizes-using-breakpoint-in-v