如何使用 vuetity 的 v-row 和 v-col 输出 7 或 8 列网格？

Question

我知道 vuetify 的网格属性是围绕 12 列 flex-box 构建的，但我想创建一个默认为 7 或 8 列而不是典型的 12 列的网格，如本例所示：

<v-row>
  <v-col 
    v-for="(n, index) in 15" 
    :key="index"
    cols="7" 
    sm="7" 
    md="3" 
    lg="1" 
  >
    <v-card>
      <v-card-title>{{ index }}</v-card-title>
    </v-card>
  </v-col>
</v-row>

我对文档的阅读是，通过设置cols="7"（而不是 12）我可以实现这个结果，但事实并非如此。

这甚至可能吗？

Answer 1

1. Vuetify 网格使用 12 列并且是固定的。没办法...
2. 道具等cols/ sm/lg限定的宽度v-col在列（即多少12列应此列取的）。colmean xs and larger screen，smmeanssmall and larger等。请参阅文档中的媒体断点...
3. 这些道具的值必须是整数。这是因为在渲染时，它们用于分配预定义的 CSS 类。例如lg="1"将分配 CSS 类“.col-lg-1”

这一切都意味着，如果您想要x12 不能被x（没有提醒）整除的列数，例如 5 或 7，您有 2 个选项（x = 7 的示例）：

1. 您可以定义 7 列，宽度为 1 列，并在周围分布空白（使用 justify 和可能偏移）……这远非完美，空白太多
2. 或者您必须使用自定义 CSS 并通过媒体查询自行调整，以使其在所有屏幕尺寸上都具有响应性和美观性（灵感）

.custom7cols {
  width: 14%;
  max-width: 14%;
  flex-basis: 14%;
}

      <v-row>
        <v-col 
          v-for="(n, index) in 15" 
          :key="index"
          class="custom7cols" 
        >
          <v-card>
            <v-card-title>Column {{ n }}</v-card-title>
          </v-card>
        </v-col>
      </v-row> 

演示

个人笔记1：三思是否真的需要这个

个人笔记2：我不喜欢Vuetify的网格系统。我知道 Flexbox 是如何分叉的，但 Vuetify grid 是基于 Bootstrap 的，如果你不知道 Bootstrap 是如何工作的（我不知道也不想要），那么从 Vuetify 映射到简单的 Flexbox 真的很困难。