vue.js - 带有 vuetify 的响应式布局

Question

我有一个布局，每行有 4 个 div，现在在移动设备中我想将 4 个 div 更改为 2 个 div，如图像

这是我的代码

<v-layout wrap align-center>
    <v-flex
        v-for="n in 10  "
           :key="n"
           xs3
           >
           <p>testtttt</p>
     </v-flex>
</v-layout>

来自 Vuetify 的示例 https://codepen.io/thanhtungvo/pen/Padagq?&editors=100 当前有 3 张图片，如何更改 2 张图片并在移动版本中保持最大宽度（响应式）谢谢

标签： vue.jsvuetify.js

Answer 1

感谢Vuetify，可以这样修复

<v-flex
  v-for="i in 4 "
    :key="i"
     xs6
     md3
>

xs6：小屏
md3：中屏
其他指标可以查看文档 https://vuetifyjs.com/en/layout/display