Как сделать vueitfy v-layout, чтобы охватить всю ширину экрана - PullRequest
Новая
       23

Как сделать vueitfy v-layout, чтобы охватить всю ширину экрана

0 голосов
/ 30 октября 2019

Я пытаюсь реализовать vuetify v-list Avatar с 3 строками, используя документацию vuetify https://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>

вот как это выглядит сейчас , ноЯ хотел бы увеличить ширину, чтобы покрыть большую часть экрана, если не все.

Ответы [ 2 ]

0 голосов
/ 31 октября 2019

Я нашел причину, почему это не сработало. В моем 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>

Это привело к тому, что ширина быланебольшой. Как только я изменил его на ряд, ширина макета увеличилась.

0 голосов
/ 30 октября 2019

Изучите пример кода ручки [ссылка] (https://codepen.io/pen/?&editable=true&editors=101) в Vuetify для Аватара с 3 строками

У них есть настройка ширины в их v-card

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

У вас должно быть что-то подобное выше, где вы запускаете свой шаблон, может быть, прямо под тем местом, где запускается приложение div id="app"

Если у вас нет ничего подобного, попробуйте поместить его в v-контейнер. 

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

Надеюсь, что работает!

...