我的操作按钮不断更改网格对象的大小

时间:2019-03-27 19:25:53

标签: html vue.js vuetify.js

这可能是一个简单的问题,但我最近才开始使用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>

1 个答案:

答案 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>