如何使 vuetify v-layout 覆盖整个屏幕宽度答案

【问题标题】：How to make vueitfy v-layout to cover the whole width of the screen如何使 vuetify v-layout 覆盖整个屏幕宽度
【发布时间】：2019-10-30 16:31:36
【问题描述】：

我正在尝试使用 vuetifyhttps://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 但如果不是全部，我想增加宽度以覆盖大部分屏幕。

【问题讨论】：

标签： vue.js vuetify.js nuxt.js

【解决方案1】：

查看 Vuetify 上的 codepen 示例 [a link] (https://codepen.io/pen/?&editable=true&editors=101) 以获取 3 行的 Avatar

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

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

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

如果你没有类似的东西，试着把它放在 v-container 中

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

希望有效！

【讨论】：

感谢您的回答，但并没有解决问题。是的，他们在v-card 中设置了宽度，我之前尝试过使用他们的示例，我什至将宽度增加到“1080”，但它不起作用。最远的是将宽度设置为"550" 之后，v-card 宽度没有增加。此外，使用 v-container 并按照您推荐的 <v-container max-width="1080" fluid> 设置宽度的第二种解决方案根本没有效果，我尝试了越来越大的宽度，但没有任何反应。

【解决方案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>

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

【讨论】：