这可能是一个简单的问题,但我最近才开始使用vuejs进行验证,并为我正在学校上班的项目管理应用程序添加了网格系统,当我添加按钮时,它扭曲了条形图。我将其制成自己的组件,并尝试将其嵌套在项目栏中
我希望它看起来如何。这是在我嵌套组件https://gyazo.com/04ca8e62f32f2077d739dd9f7d6b55be
之前现在的样子 https://gyazo.com/919725a55ccec56e133b231404c18590
我的项目条形码
<!-- Need to do container -->
<v-container fluid grid-list-md text-xs-center>
<v-layout column>
<v-flex>
<v-card dark color="blue">
<v-card-text class="px-0">Need to Do</v-card-text>
<v-flex>
<!-- Nested--> <AddTask />
</v-flex>
< /v-card>
</v-flex>
</v-layout>
</v-container>
我的按钮代码
<template>
<v-dialog max-width="800px">
<v-btn fab small color="cyan accent-2" bottom left block
absolute
slot="activator">
<v-icon>add</v-icon>
</v-btn>
<v-card>
<v-card-title>
<h2>Add a Task or Project</h2>
</v-card-title>
<v-card-text>
</v-card-text>
</v-card>
</v-dialog>
</template>
答案 0 :(得分:1)
在AddTask
之间移动<v-card-text class="px-0">
,将下面的代码用于项目条形码:https://codepen.io/anon/pen/bZPxwW
<v-container fluid grid-list-md text-xs-center>
<v-layout column>
<v-flex>
<v-card dark color="blue">
<v-card-text class="px-0">Need to Do
<!-- Nested--> <AddTask />
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>