如何使vueitify v布局覆盖整个屏幕宽度

Question

我正在尝试使用vue用3行实现vuetify v-list Avatartifyhttps://vuetifyjs.com/en/components/lists#examples文档但是，列表会显示出来，但不会覆盖屏幕的整个宽度。

这是我的代码

<template>
<v-container fluid>
<v-layout row wrap>
<v-flex>
<v-list>
<template v-for="(item, index) in items">
<v-subheader
v-if="item.header"
id="item.header"
:key="item.header"
v-html="item.header"
></v-subheader>
<v-divider
v-else-if="item.divider"
:key="index"
:inset="item.inset"
></v-divider>
<v-list-item v-else :key="item.title" two-line>
<v-layout row wrap justify-space-between>
<v-flex xs12 md4>
<v-list-item-avatar>
<v-img :src="item.avatar"></v-img>
</v-list-item-avatar>
</v-flex>
<v-spacer />
<v-flex xs12 md8>
<v-list-item-content>
<v-list-item-title v-html="item.title"></v-list-item-title>
<v-list-item-subtitle
v-html="item.subtitle"
></v-list-item-subtitle>
</v-list-item-content>
</v-flex>
</v-layout>
</v-list-item>
</template>
</v-list>
</v-flex>
</v-layout>
</v-container>
</template>

这是它现在的样子，但我想增加宽度，以覆盖大部分屏幕，如果不是全部的话。

Answer 1

查看codepen示例[a链接](https://codepen.io/pen/?&可编辑=真&editors＝101(在Vuetify上为具有3行的阿凡达

他们在v-card中设置了宽度

<v-card
max-width="450"
class="mx-auto"
>

你应该在上面启动模板的地方有这样的东西，也许就在应用程序启动div id="app"的下面

如果你没有这样的东西，试着把它放在v容器中

<v-container max-width="1080" fluid>

希望能奏效！

Answer 2

我找到了它不起作用的原因。在我调用具有此代码的组件的index文件(它是父文件(中，我使用了<v-layout column wrap>而不是<v-layout row wrap>。

<template>
<v-container class="mx-auto">
<v-layout column wrap>
<v-flex>
<MyProfile />
<Education :items="items" />
</v-flex>
</v-layout>
</v-container>
</template>

这导致宽度较小。一旦我将其更改为行，布局的宽度就会扩大。