当我在浏览器上运行此代码时,工具栏显示在底部,如何在浏览器顶部显示它

时间:2019-03-08 09:34:53

标签: vuetify.js

<style scoped>
.toolb{
  position:absolute
  top:0px;
}
</style>

<script>
  export default {
    data () {
      return {
        sideNav: false
      }
    }
  }
</script>
<template>
  <v-app>
    <v-navigation-drawer v-model="sideNav">
      <v-list>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>supervisor_account</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>View Meetups</v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar dark class="primary toolb">
      <v-toolbar-side-icon
        @click.stop="sideNav = !sideNav"
        class="hidden-sm-and-up "></v-toolbar-side-icon>
      <v-toolbar-title>DevMeetup</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-xs-only">
        <v-btn flat>
          <v-icon left dark>supervisor_account</v-icon>
          View Meetups
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <main>

    </main>
  </v-app>
</template>

要使工具栏位于顶部,我必须使用CSS样式'位置 :绝对top:0px;'这会影响我的所有其他组件,因为我必须在所有组件样式中再次使用'位置 :绝对顶部:50像素或40像素;'而且这些组件的行为不正常,因此请告诉我该如何解决?不使用css样式仅vuetify 我在哪里学习vuetify,我的老师正在使用它,因为它是代码,没有CSS即可正常工作?仅在此组件中使用vuetify。 但是如果我将v-content用作我的v-container的父级,而不是出现另一个问题,那就是该工具栏出现后导航抽屉位于顶部

0 个答案:

没有答案