vuetify v-col xs =“ 12”仅填充一半的宽度

Question

我想知道为什么当屏幕尺寸小于600像素时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

锅盘样品

Answer 1

It's a combination of two things

1. There is no XS prop available to v-col.
2. Columns automatically take up the entire available space within its parent container unless you've specified the width it should take up before hand.

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

To address this, set the "cols" prop of v-col to 12 to indicate that it should take up 12 columns across all viewports. You can consider it to be the "xs" property you're trying to use. Then, any larger viewports will inherit the last valid size.

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