浮动操作按钮隐藏在底部导航栏中

Question

<v-tooltip top>
  <template v-slot:activator="{ on }">
        <v-btn
          fab
          color="green"
          v-on="on"
          bottom
          right
          fixed
          :loading="isRefreshing"
          @click="refreshFiles"
        >
          <v-icon color="white">mdi-sync</v-icon>
        </v-btn>
      </template>
  <span>Refresh</span>
</v-tooltip>

<v-bottom-navigation v-if="isMobileViewVisible" app fixed grow shift>
  <template v-for="item in menuItems">
            <v-btn
              v-if="item.isVisible"
              :key="item.title"
              icon
              @click="goToRoute({ name: item.name, params: item.params })"
            >
              <span>{{ item.title }}</span>
              <v-icon>{{ item.icon }}</v-icon>
            </v-btn>

          </template>
  <v-btn icon @click="toProfileEdit">
    <span>Profile</span>
    <v-icon>mdi-account</v-icon>
  </v-btn>
</v-bottom-navigation>

我正在使用 vuejs 和 vuetify，我有一个查询被卡住了，问题是我使用底部导航栏路由到各种组件（页面），并且每个页面的右下角都有一个浮动操作按钮，问题浮动操作按钮隐藏在底部导航栏中。

有没有关于如何克服这个问题的想法或方法？？

对示例的任何帮助将不胜感激..

如您所见，绿色按钮隐藏在底部导航栏后面。

Answer 1

尝试使用内联样式：

{
  "rules": {
    "Projects": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
              }
      },
"Contacts": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
              }
      }
   }
}