Vuetify 列表项未正确显示

Question

我正在使用 vuetify 来正确显示列表项，如下面的结构

Interests

btn1 btn2
btn3 btn4

Not Interests

btn1 btn2
btn3 btn4

但标题"Interests"、"Not Interests"未能正常显示。

 <v-layout row wrap>
        <v-flex xs12 v-for="kid in kids">
          <v-card color="blue-grey darken-2" class="white--text">
            <v-card-title primary-title>
            <div>
              <div class="headline">{{kid.name}}</div>
              <span class="grey--text">{{kid.school.name}}</span>
            </div>
              <!--<div>Listen to your favorite artists and albums whenever and wherever, online and offline.</div>-->
            </v-card-title>
            <v-card-actions>
              <v-list>
                <v-list-tile @click="">
                  <v-list-tile-content>
                    <v-list-tile-title>Interests</v-list-tile-title>
                    <div>
                    <v-btn flat dark v-for="(interest, idx) in kid.interests" :key="idx">{{interest}}</v-btn>
                    </div>
                  </v-list-tile-content>
                </v-list-tile>

                <v-divider></v-divider>

                <v-list-tile @click="">
                  <v-list-tile-content>
                    <v-list-tile-title>Not Interests</v-list-tile-title>
                    <div>
                    <v-btn flat dark v-for="(nointerest,idx) in kid.notinterests" :key="idx">{{nointerest}}</v-btn>
                    </div>
                  </v-list-tile-content>
                </v-list-tile>
              </v-list>
            </v-card-actions>

          </v-card>
        </v-flex>
      </v-layout>

我尝试为列表项设置固定高度，但仍然对齐错误。

Codepen

Answer 1

正确的方法是使用 two-line 选项

 <v-list two-line>
  ...
 </v-list>

演示 https://codepen.io/ittus/pen/aGeJPe

您可以根据需要设置列表图块的高度

.list__tile {
  height: 5rem !important;
}

Vuetify 列表项未正确显示

Vuetify list items not showing properly

javascript

css

vue.js

vuejs2

vuetify.js