使用 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张图片并保持最大宽度（响应式）谢谢

Answer 1

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

Answer 2

感谢 Vuetify，它可以这样修复

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

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

使用 vuetify 的响应式布局

responsive layout with vuetify

vue.js

vuetify.js