vuetify.js如何获取v容器的完整宽度

Question

我是新手，vuetify.js并开始尝试它。

这是我的代码。

管理员面板

<v-content class="yellow">
  <v-container>
    <v-layout>
      <router-view></router-view>
    </v-layout>
  </v-container>
</v-content>

create-user.vue

<template>
    <v-container class="red">
        <v-layout class="blue">
            <v-flex md12>
                form
            </v-flex>
        </v-layout>
    </v-container>
</template>

在这里，我可以看到v-containerelement获得了可用的全宽。我想要的是v-container在create-user组件中获取相同的宽度。（黄色将消失，红色将填满屏幕）

我该如何实现？

Answer 1

使用fluid道具：

<v-container 
  fluid
/>

Codepen。

Answer 2

我遇到了同样的问题。

我意识到在我的实例中，我<v-content>在父页面和子页面上都有一个。本<v-content>是用来使应用程序的外观漂亮，管理间距导航栏和标题栏。

确保您的应用程序中只声明了一个。

Answer 3

您是否尝试使用边距和填充类/道具？

<v-container class="red ma-0">

或者

<v-container class="red" :ma-0="$vuetify.breakpoint.mdAndDown">

只为移动设备提供全屏？