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

【问题标题】：How to output 7 or 8 column grids using vuetity's v-row and v-col?如何使用 vuetity 的 v-row 和 v-col 输出 7 或 8 列网格？
【发布时间】：2020-04-20 11:01:51
【问题描述】：

我知道 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>

我的read of the documentation 是通过设置cols="7"（而不是12）我可以达到这个结果，但事实并非如此。

这甚至可能吗？

【问题讨论】：

I'd like to create a grid with a default of 7 or 8 columns instead of the typical 12 ...这是什么意思？请澄清....
@MichalLevý cols 的默认属性是 12 <v-col cols="12"> 对于 12 col 网格。我正在尝试创建一个 7 或 8 列网格。这有助于解释吗？谢谢。
嗯，不是真的。您是否正在尝试创建卡片列，每张卡片 7 列宽（Vuetify 网格正在使用的总列中的 12 列）？
我正在尝试做相反的事情；我正在尝试创建一个 7 卡宽的网格。换句话说，一个有 7 列的网格：每行包含 7 列，每列包含一张卡片。谢谢。

标签： javascript vue.js vuetify.js nuxt.js

【解决方案1】：

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

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

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

【讨论】：

感激不尽！很高兴在看到网格的数字列周围没有办法找到答案。我很欣赏自定义 CSS 示例和灵感链接。

【解决方案2】：

你可以用v-flex代替v-col，它连续显示6列，参考下面的代码：

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
})

<div id="app">
    <v-app id="inspire">
        <v-container class="grey lighten-5">
            <v-row no-gutters>
                <template>

                    <v-flex xs7 sm7 md3 lg2 v-for="(n,index) in 15" :key="n">
                        <v-card>
                            <v-card-title>{{ index }}</v-card-title>
                        </v-card>
                    </v-flex>
                </template>
            </v-row>
        </v-container>
    </v-app>
</div>

【讨论】：

来自文档：v-col 是一个内容持有者，必须是v-row 的直接子代。这是 1.x 中 v-flex 的 2.x 替代品。所以 v-flex 与 v-col 相同并且已弃用 ....
使用 v-col 输出没有以预期的格式实现，并且它在同一行中显示所有数字，即通常为 12 .. 并且通过使用 v-flex 至少我能够实现连续 6 列而不是 12 列
感谢@DharaParmar。获得 6 列没有问题（6 是 12 的除数）。我要解决的问题是如何使用 v-row 和 v-col 获得 7 或 8 列。这有意义吗？

【解决方案3】：

抱歉，我知道您已经有一段时间没有发布此消息了。我试图达到同样的结果。我需要 7 或 8 列，在找到这篇文章之前我一直卡住。

首先谢谢。

我需要它具有响应性，如果窗口大小低于 600 像素，在我的情况下，它看起来不适合 7 或 8 列。所以我对 Michal Levy 的代码做了一些修改（非常感谢），我想分享一下，也许它会对其他人有所帮助。

CSS：

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

JS：

<v-row>
    <v-col 
      v-for="(n, index) in 15" 
      :key="index"
      :class="{
        custom4cols: $vuetify.breakpoint.xs,
        custom7cols: $vuetify.breakpoint.smAndUp
      }" 
    >
      <v-card>
        <v-card-title>Column {{ n }}</v-card-title>
      </v-card>
    </v-col>
  </v-row>

最好的问候。

【讨论】：

【解决方案4】：

我也遇到了这个问题。当然，您可以将打印布局的 col-12 设置为 cols-3 或任何合适的值，但随后您将失去小屏幕

我的解决方案是，声明一个@media 打印并由其他刹车点类覆盖 col-12。（打印总是采用最小的断点 CSS 类）

例如 col 12 但 sm-3 使用 sm-3 flex/width

    @media print {
      div.col-sm-3.col-12 {
          flex: 0 0 25%;
          max-width: 25%;
       }
       div.col-sm-6.col-12 {
         flex: 0 0 50%;
         max-width: 50%;
       }
    }

【讨论】：