使 vuetify 应用栏项目与 <v-container> 正文内容对齐答案

【问题标题】：Make vuetify app bar items align with <v-container> body content使 vuetify 应用栏项目与 <v-container> 正文内容对齐
【发布时间】：2023-03-15 03:30:01
【问题描述】：

stock 应用栏组件将项目向左对齐，如果使用v-spacer 组件，则会将项目推送到最右边。

我尝试将带有v-container 的按钮项包装在v-app-bar 中，但是一旦添加了其他组件，它就会破坏布局。

理想情况下，左侧按钮应与 hello 对齐，同样与右侧按钮对齐，它们应与主体的 v-container 右侧对齐。

我尝试用v-container 包装v-app-bar：

这基本上是我想要的布局，但显然不是推入背景颜色，它应该像第一张图片一样填充宽度。

是否有本地方法可以做到这一点，还是我需要发挥创意？

<template>
    <v-container>
        <v-app-bar
                color="indigo accent-4"
                dense
                flat
                dark
        >
            <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 items" 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>
</template>

类似的问题，但没有答案。 Problem with placing v-app-bar content in container?

【问题讨论】：

标签： vuetify.js

【解决方案1】：

如果您希望将v-app-bar 固定到页面顶部，我通过将v-app-bar 包裹在v-container 内另一个v-app-bar 来解决这个问题：

<template>
  <v-app-bar app fixed dense color="grey lighten-4" elevation="1">
    <v-container>
      <v-app-bar dense elevation="0">
        <v-app-bar-title nuxt href="/">
          My Title
        </v-app-bar-title>
      </v-app-bar>
    </v-container>
  </v-app-bar>
</template>

【讨论】：

【解决方案2】：

在此期间找到了一个解决方法，不确定它有多干净：

我的解决方案如下所示：

颜色显示已调整以匹配正文的导航栏宽度。代码如下所示：

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

【讨论】：