我是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-container
元素获得了可用的全部宽度。我想要的是我在create-user组件中的v-container
获得相同的宽度。(黄色将消失,红色将填满屏幕)
我如何实现这一目标?
8条答案
按热度按时间lstz6jyr1#
使用
fluid
属性:Codepen .
xkrw2x1b2#
我也有同样的问题。
我意识到在我的例子中,我在父页面和子页面上都有一个
<v-content>
,<v-content>
用于使应用程序看起来更漂亮,并管理导航栏和标题栏上的间距。请确保您在应用中只声明了一个。
yqhsw0fo3#
你试过使用margin和padding类/props吗?
或
只在移动的设备上使用全屏显示?
wh6knrhe4#
@Billial Begueradj发布的答案是完美的。然而,问题可能仍然存在 * 如果有一个未检查的v-container标记在层次结构 * 上。
This will NOT work
在上面的代码中,内部的v-container标记将不会实现全宽,因为在层次结构中还有另一个v-container标记没有设置为全宽布局,它将有效地限制内部标记
这会成功
将内部和外部v-container标记都设置为占据全角即可解决此问题。
jljoyd4f5#
使用液体并移除填充物(如有)
8wigbo566#
你可以这样试试
主视图
类别.vue
所以它将占据右侧的全部空间。
nhhxz33t7#
对于任何使用nuxt的人-请确保您将流体 prop 应用于布局中的顶级v容器,而不是页面组件中的容器。
jaxagkaj8#
我遇到了同样的问题,添加流体是不够的。原来在style.css文件中创建项目后,#app的max-width属性设置为1280 px;.修改为width后:100%和填充:0,它看起来像我想要的方式。
在style.css中
致: