我正在尝试使用vuetify和nuxt构建网页。我正在尝试设置扩展面板ui组件(https://vuetifyjs.com/en/components/expansion-panels)的max-width属性。我有:
<template>
<v-app id="inspire">
<v-layout align-center justify-center row fill-height>
<!-- <v-layout align-center > -->
<v-expansion-panel style="maxWidth: 1200px" >
<v-expansion-panel-content v-for="(item,i) in items" :key="i">
<div slot="header">{{item.header}}</div>
<v-card >
<v-card-text>{{item.text}}</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-layout>
</v-app>
</template>
这使扩展面板居中,但我想将扩展面板推到v布局的顶部,以减少空间。现在有很大的差距。请看截图。我如何做到这一点?
答案 0 :(得分:1)
尝试从布局组件中删除以下道具:
align-center justify-center
new Vue({
el: '#app',
})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id="app" data-app>
<v-app id="inspire">
<v-layout row fill-height>
<!-- <v-layout align-center > -->
<v-expansion-panel style="max-width: 1200px">
<v-expansion-panel-content v-for="item in 5" :key="item">
<div slot="header">{{item}}</div>
<v-card>
<v-card-text>some content</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-layout>
</v-app>
</div>