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

Question

我想知道为什么当屏幕尺寸为 <600px 时 vuetify 断点不起作用

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

Answer 1

这是两件事的结合

1. 没有可用于 v-col 的 XS Prop 。
2. 列会自动占据其父容器内的全部可用空间，除非您事先指定了它应该占据的宽度。

Columns will automatically take up an equal amount of space within their parent container. This can be modified using the cols prop. You can also utilize the sm, md, lg, and xl props to further define how the column will be sized in different viewport sizes.

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

为了解决这个问题，将 v-col 的“cols”属性设置为 12，以指示它应该在所有视口(viewport)中占用 12 列。您可以将其视为您尝试使用的“xs”属性。然后，任何更大的视口(viewport)将继承最后的有效尺寸。

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