Vuetify V-flex 仅满卡的一半

Question

我的 v-flex 不尊重我的命令，只渲染了一半的元素。看印刷品：

Print from my view

这是我的脚本：

<v-card-title primary-title>
              <div>
                <p class="subheading grey--text">My title</p>
                <h3 class="headline my-4">my sub title</h3>
                <div>
                  <v-container fluid>
                    <v-card flat v-for="ticket in tickets" :key="ticket.id">
                      <v-layout row wrap :class="`pa-2 ticket ${ticket.status.id}`">
                        <v-flex xs3>
                          <div class="caption grey--text">#ID</div>
                          <div>{{ticket.id}}</div>
                        </v-flex>
                        <v-flex xs3>
                          <div class="caption grey--text">Assunto</div>
                          <div>{{ticket.subject}}</div>
                        </v-flex>
                        <v-flex xs3>
                          <div class="caption grey--text">Criado em</div>
                          <div>{{ticket.created_on}}</div>
                        </v-flex>
                        <v-flex xs3>
                          <div class="right">
                            <v-chip
                              small
                              :class="`${ticket.status.id} white--text caption my-2`"
                            >{{ticket.status.name}}</v-chip>
                          </div>
                        </v-flex>
                      </v-layout>
                    </v-card>
                  </v-container>
                </div>
              </div>
            </v-card-title>

有人有什么想法吗？

Tks.

Answer 1

您可以在第 7 行的 v-card 上方添加一个全宽弹性框：

 <v-flex xs12>
   <v-card flat v-for="ticket in tickets" :key="ticket.id">  
     ...

编辑：我的错误...再看一遍后，您可以将第 2 行的 div 更改为 v-flex，这将为您提供类似于此代码笔中的结果：https://codepen.io/retrograde/pen/ZNYJRq?editors=0001 请注意，我删除了添加的代码我原来的答案。