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

Question

我知道 vuetify 的网格属性是围绕 12 列弹性框构建的，但我想创建一个默认为 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>

我的 read of the documentation是通过设置 cols="7"(而不是 12)我可以达到这个结果，但看起来并非如此。

这可能吗？

Answer 1

1. Vuetify 网格使用 12 列并且是固定的。没办法……
2. props like cols/sm/lg 定义列中 v-col 的宽度(即有多少该列应占 12 列)。 col 表示 xs 和大屏幕，sm 表示小和大 等。请参阅文档中的媒体断点。 .
3. 这些 Prop 的值必须是整数。这是因为在渲染时，它们用于分配预定义的 CSS 类。例如 lg="1" 将分配 CSS 类 ".col-lg-1"

这一切都意味着，如果你想要 x 的列数，其中 12 不能被 x 整除(没有提醒)，比如 5 或 7，你有 2 个选项(示例对于 x = 7):

1. 您可以定义 7 列，宽度为 1 列，并在周围分布空白(使用 justify 或 offset)...这远非完美，空白太多
2. 或者您必须使用自定义 CSS 并使用媒体查询自行调整它，以使其在所有屏幕尺寸上都能响应且美观 (inspiration)

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

Demo

个人说明1:三思是否真的需要这个

个人说明2:我不喜欢Vuetify的网格系统。我知道 Flexbox 是如何 fork 的，但 Vuetify 网格是基于 Bootstrap 的，如果你不知道 Bootstrap 是如何工作的(我不知道也不想知道)，那么很难从 Vuetify 映射到简单的 Flexbox。