如果缓慢扩展站点，Vuetify Grid System Breakpoints 不起作用答案

【问题标题】：Vuetify Grid System Breakpoints don't work if expanding the site slowly如果缓慢扩展站点，Vuetify Grid System Breakpoints 不起作用
【发布时间】：2021-04-21 08:44:31
【问题描述】：

我在 Vuetify 中遇到了网格系统断点问题。除了标题中提到的问题外，一切正常。一旦我尝试慢慢地扩展站点，就会忽略断点。这些列应该彼此之间，并且随着扩展它们应该彼此相邻。有人知道这可能来自哪里吗？

代码：

<v-container class = "big-container" fluid xs12 sm12 md16 lg12>
  <v-row = "container-row">
    <v-col class = "col-left"> </v-col>
    <v-col class = "col-right"> </v-col>
  </v-row>
</v-container>

【问题讨论】：

标签： html vue.js vuetify.js

【解决方案1】：

v-container 不支持xs12 sm12 md16 lg12 等属性。您应该使用v-col 的cols（对于xs）、sm、md 和lg 属性。并确保每个断点使用的网格单元数量少于前一个，以便在更大屏幕上的同一行中容纳更多项目。也就是说，它应该是这样的：

<v-container class = "big-container" fluid>
  <v-row justify="space-between" align="start">
    <v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 1</v-col>
    <v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 2</v-col>
    <v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 3</v-col>
    <v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 4</v-col>
    <v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 5</v-col>
    <v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 6</v-col>
    <v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 7</v-col>
  </v-row>
</v-container>

【讨论】：