将 v-app-bar 内容放置在容器中的问题? [英] Problem with placing v-app-bar content in container?
问题描述
我需要将内容放在容器内的 v-app-bar 中，因此它与其他页面内容排成一行.应用程序内的所有内容应该为每个断点设置最大宽度，而不是整个页面宽度.将所有内容放在容器旁边并不能解决问题.
我在屏幕截图上用红色框标记了内容应在的位置.
嘿，我遇到了同样的问题.我想出了一个粗略的解决方法，我的问题在这里，以防您也找到了答案.
颜色显示调整后的导航栏宽度以匹配正文.代码如下:
<v-sheet color=红色"><v-容器类=pa-0"><v-app-bar稠密平坦的颜色=蓝色口音-4"><v-btn 图标><v-icon>mdi-home-outline</v-icon></v-btn><v-divider inset vertical></v-divider><v-btn text :key="item.id";v-for=快速链接中的项目"；v-text=item.text"></v-btn><v-间隔></v-间隔><v-btn text v-text="'登录'"></v-btn><v-btn text v-text="'注册'"></v-btn></v-app-bar></v-容器></v-sheet>I need to place content inside v-app-bar inside container, so It goes in one line with other page content. All content inside app should have max width for each breakpoint instead of full page width. Placing all content iside container don't solve problem.
I marked with red box on screenshot where content should be.
Hey I am having the same issue. I came up with a rough work around, my question is here incase you found an answer as well.
Make vuetify app bar items align with <v-container> body content
My solution looks like so:
The colors show the nav bar width adjusted to match the body. The code looks like so:
<template>
<v-sheet color="red">
<v-container class="pa-0">
<v-app-bar
dense
flat
color="blue accent-4"
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in quickLinks" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</v-sheet>
</template>
这篇关于将 v-app-bar 内容放置在容器中的问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
