我想知道,当屏幕大小为<600像素

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

推荐答案

这是两件事的结合

  1. v-col没有可用的XSprops .
  2. 列会自动占用其父容器中的整个可用空间,除非您事先指定了它应该占用的宽度.

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

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

Vue.js相关问答推荐

如何只提取一次用于无线电组过滤的数据,而不是针对数据库中的每个条目提取数据?

如何防止Nuxt3重新加载时滚动跳到网页顶部

Vuejs 通过数据键迭代复杂对象

如何将模板传递给EJS菜单

在移动版本中使用标准的 v-data-table

vue js如何将布尔值传到数据库

:deep() 带有嵌套 scss 规则的语法

使用 vue.js 的 axios 预检失败错误 301

正确实现 Vue.js + DataTables

如何根据生产或开发模式读取不同的 .env 文件?

Vue.js 过滤数组

加载和渲染时对象值上的 Vue.js 未定义错误

SassError:媒体查询表达式必须以(开头

如何使用 Vuejs 和 Laravel 获取当前经过身份验证的用户 ID?

Vue - 如何在 v-if 或组件中使用窗口对象

如何从方法内部访问数据

更改事件上的 Select2 在 Vuejs 中不起作用

$emit 不会触发子事件

v-for 中的计算(Computed)/动态(Dynamic) v-model 名称

在 Vuex 模块中进行继承的方法