Блог

Как мне избавиться от заполнения, отделяющего панель инструментов от содержимого?

Я хотел бы добиться того же результата, что и на картинке ниже

Ожидание:

Что я получил:

Это мой файл 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>
  

Добавьте absolute и width="100%" к <v-toolbar/> .

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

ДЕМОНСТРАЦИЯ: