Vuetify 基于断点的响应式网格列

Question

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

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

Answer 1

对不起，如果我迟到了。这是我在没有垂直填充的 v-col 中使用 v-row 来解决你的问题。

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

这是一个 working demo，这是一个样本输出。