vue.js - Vuetify 基于断点的响应式网格列

Question

我希望列响应并根据断点大小变化采取行动：

我真的很困惑如何在 Vuetify 代码上定义这个逻辑！

标签： vue.jsgridvuetify.jsnuxt.js

Answer 1

对不起，如果我迟到了。这是我对在没有垂直填充v-row的内部使用的问题的看法。v-col

<v-row>
  <v-col cols="12" md="6" class="py-0">
    <v-row :column="$vuetify.breakpoint.mdAndDown">
      <v-col cols="12" lg="6" style="border: 1px solid red;">1</v-col>
      <v-col cols="12" lg="6" style="border: 1px solid red;">2</v-col>
    </v-row>
  </v-col>
  <v-col cols="12" md="6" style="border: 1px solid red;">3</v-col>
</v-row>

这是一个工作演示，这是一个示例输出。