使验证应用程序栏项目与&lt；v-容器&gt；正文内容对齐 [英] Make vuetify app bar items align with <v-container> body content

问题描述

常用应用栏组件硬左对齐项目，如果使用v-spacer组件，则会将项目硬推到右。

我曾尝试使用v-app-bar内的v-container包装按钮项，但一旦添加其他组件就会破坏布局。

理想情况下，左侧的按钮应与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?

推荐答案

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

我的解决方案如下所示：

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

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

这篇关于使验证应用程序栏项目与&lt；v-容器&gt；正文内容对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！