如何使vueitfy v-layout覆盖屏幕的整个宽度

Question

我正在尝试使用vuetify https://vuetifyjs.com/en/components/lists#examples文档以3行实现vuetify v-list Avatar。但是，显示了列表，但没有覆盖屏幕的整个宽度。

这是我的代码

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

here is how it looks now，但如果不是全部，我想增加宽度以覆盖大部分屏幕。

Answer 1

为三行头像在Vuetify上检查码本示例[链接]（https://codepen.io/pen/?&editable=true&editors=101）

他们的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>。