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

debugcn 发表于 Dev

akaHeimdall

我知道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）可以实现此结果，但情况并非如此。

这有可能吗？

米哈尔·莱维（MichalLevý）

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

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

您可以定义7列，宽度为1列，并在周围分布空白（使用对齐和偏移量）...这远非完美，空白太多
或者，您必须使用自定义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网格是基于Bootstrap的，并且如果您不知道Bootstrap的工作原理（我也不想），则很难从Vuetify映射到简单的Flexbox。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。