vue.js - 如何在 Vuetify 中使 Appbar 透明并且没有填充

Question

如何去掉工具栏与内容之间的填充？

我想要达到与下图相同的结果

期望:

我得到了什么:

这是我的App.vue文件

     <v-app>
       <app-navigation></app-navigation>
    
        <v-main>
          <v-content class="ma-0 pa-0">
            <div class="d-flex flex-wrap justify-center" width="900">
              <img src="https://picsum.photos/300/300"/>
              <img src="https://picsum.photos/600/300"/>
              <img src="https://picsum.photos/700/300"/>
              <img src="https://picsum.photos/200/300"/>
              <img src="https://picsum.photos/400/300"/>
              <img src="https://picsum.photos/500/300"/>
            </div>
          </v-content>
   
        </v-main>
      </v-app>

这是我的 AppNavigation 文件 - 基本上是工具栏组件:

<v-toolbar color="transparent" flat>

  <router-link to="/">
    <v-toolbar-title class="pr-10"> {{ appTitle }} </v-toolbar-title>
  </router-link>

  <v-btn class="hidden-sm-and-down" text rounded to="/hello"> HELLO </v-btn>
  <v-btn class="hidden-sm-and-down" text rounded to="/hello"> HELLO </v-btn>
  <v-btn class="hidden-sm-and-down" text rounded to="/about"> About </v-btn>

  <v-spacer class="hidden-sm-and-down" ></v-spacer>
    <v-btn class="hidden-sm-and-down" outlined rounded to="/sign-up"> SIGN UP</v-btn>
    <v-btn class="hidden-sm-and-down" outlined rounded to="/log-in"> LOG IN </v-btn>

</v-toolbar>

Answer 1

添加absolute和width="100%"到<v-toolbar/> .

<v-toolbar flat color="transparent" absolute width="100%">
...
</v-toolbar>

Demo :