带有 vuetify 的响应式布局答案

【问题标题】：responsive layout with vuetify带有 vuetify 的响应式布局
【发布时间】：2018-12-05 07:48:51
【问题描述】：

我有一个布局，每行有 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.js vuetify.js

【解决方案1】：

感谢Vuetify，它可以这样修复

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

不，我的意思是它在移动时会自动更改为 2 个项目。代码不变