如何使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>

演示

​

​