我想知道为什么当屏幕尺寸
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<link href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/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
这是两件事的结合
- v-col 没有可用的 XS 道具。
- 列会自动占用其父容器内的整个可用空间，除非您事先指定了它应占用的宽度。
列将自动在其父容器内占用相同的空间。这可以使用 cols 属性进行修改。您还可以利用 sm、md、lg 和 xl 属性来进一步定义在不同视口大小中如何调整列的大小。
https://vuetifyjs.com/en/components/grids#auto-sizing-columns 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"
>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
