如何使 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>

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

Answer 1

在 Vuetify 上查看 3 行 Avatar 的 codepen 示例 [链接] ( https://codepen.io/pen/?&editable=true&editors=101 )

他们的v-card中有宽度设置

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

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

如果您没有类似的东西，请尝试将其放入 v-container

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

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