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

小屏幕显示

在大屏幕上显示

为什么小屏幕不能缩放到一半，但大屏幕可以。我错过了什么？

Answer 1

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

描述

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

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

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

所以它可以正常工作

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

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

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