vuetify v-col xs=“12"只填充一半的宽度 [英] vuetify v-col xs="12" only fill half the width

问题描述

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

I am wondering why vuetify breakpoints are not working on when screen size is <600px

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 示例

推荐答案

这是两件事的结合

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

<块引用>

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

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-尺寸列

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

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"
>

这篇关于vuetify v-col xs=“12"只填充一半的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！