Vuetifyjs网格在小屏幕上不能调整大小

Question

我使用vuetifyjs，我希望在小屏幕上调整到全屏幕宽度，但在大屏幕上有4和8的比例，但在小屏幕上无法调整大小

我已经添加了

            <v-row justify="center" align="center">
                <v-col cols="12" md="3" sm="6" v-for="(item,key) in 4" :key="key">
                    <h1>Test</h1>
                </v-col>
            </v-row>

这适用于md，但小屏幕不能调整到6

小屏幕显示

​

​

它显示在一个大屏幕上

​

​

为什么小屏幕不能缩放到一半，但大屏幕works.What我错过了吗？

Answer 1

cols="12" md="3" sm="6"

描述

cols="12"此列将收缩为12列

sm="6"此列将在较小(600px)和更大的断点上收缩到6列。

md="3"此列将在medium (960px)和更大的断点上收缩为3列。

，这样它才能正常工作

将原始cols属性设置为您希望在“小”(小于600px)屏幕上显示的内容。

我想参数cols="6" md="3"会做你想要的事情。

有关网格的更多信息：https://vuetifyjs.com/en/components/grids