Vuetify 的 v-container 水平排列 v-rows

Question

我在一个使用 Vue+Vuetify 的个人项目中工作。在一个视图中，我将有一个图像徽标，然后是一个拖放区域。为此我开始测试网格系统（Vuetify 2.X），这让我有点头疼。 为了进行测试，我使用了有关网格系统的 Vuetify 文档 website 中引用的此代码：

<template>
  <v-container class="grey lighten-5">
    <v-row v-for="n in 2" :key="n" :class="n === 1 ? 'mb-6' : ''" no-gutters>
      <v-col v-for="k in n + 1" :key="k">
        <v-card class="pa-2" outlined tile> {{ k }} of {{ n + 1 }} </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

这段代码的结果应该是这样的： 从文档和本示例中，我了解到 v-container 充当一个包含 v-rows 的包，这些 v-rows 具有 v-cols，即包含要显示的信息的 v-cols。 v-container 将垂直排列 v-rows，而 v-rows 将水平排列到 v-cols。总结：v-container 是矩阵式结构的基础，其中 v-rows 和 v-cols 的组合是矩阵的瓦片。

综上所述，在我看来使用相同的代码我得到了这个：

这里的 v 容器似乎是水平排列 v 行，甚至没有居中。 这是正常的吗？我是否错过了一个选项，或者问题可能来自视图之外？ 感谢您抽出宝贵时间。