vuetify v-col xs="12" 只填充一半宽度

【问题标题】：vuetify v-col xs="12" only fill half the widthvuetify v-col xs="12" 只填充一半宽度
【发布时间】：2019-08-28 00:12:13
【问题描述】：

我想知道为什么当屏幕尺寸为

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

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <v-app id="inspire">
    <v-container class="grey lighten-5">
      <v-row no-gutters>
        <v-col
          v-for="n in 3"
          :key="n"
          xs="12"
          sm="12"
          md="4"
        >
          <v-card
            class="pa-2"
            outlined
            tile
          >
            One of three columns
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

当屏幕尺寸为XS时，我期望相同的列宽

Codepan sample

【问题讨论】：

标签： html css vue.js vuetify.js

【解决方案1】：

这是两件事的结合

没有可用于 v-col 的 XS 属性。
列会自动占用其父容器中的全部可用空间，除非您事先指定了它应占用的宽度。

列将自动在其父容器中占用等量的空间。这可以使用 cols 属性进行修改。您还可以利用 sm、md、lg 和 xl 属性进一步定义列在不同视口大小中的大小。

https://vuetifyjs.com/en/components/grids#auto-sizing-columns

要解决这个问题，请将 v-col 的“cols”属性设置为 12，以指示它应该在所有视口中占据 12 列。您可以将其视为您尝试使用的“xs”属性。然后，任何较大的视口都将继承最后一个有效大小。

<v-col
  v-for="n in 3"
  :key="n"
  cols="12"
  md="4"
>

【讨论】：

XS 属性在 v-row 或任何其他网格容器上可用吗？如果不是，XS 道具适用于哪里？
Vuetify 1.5 在容器上使用了 xs 属性，但在 Vuetify 2 中将其替换为 cols。