浮动操作按钮重叠答案

【问题标题】：Floating action buttons overlap浮动操作按钮重叠
【发布时间】：2020-03-19 01:25:56
【问题描述】：

我想要两个浮动操作按钮 (FAB)，但目前按钮重叠，我想要实现的是显示两个浮动操作按钮，如下图所示。

这可能是一个反复出现的问题，但我没有找到任何 vuetify 的解决方案

这是我的代码：

<v-btn fab bottom fixed right dark color="primary"></v-btn>
<v-btn fab bottom fixed small right dark color="secondary"></v-btn>

Vuetify 版本：2.1.11

【问题讨论】：

您可以将style="bottom:64px" 添加到其中之一
如果您不想使用样式，也可以在其中一个上添加边距类。
@Billion，我不认为 vuetify 带有 mb-16 类 - 你需要 64 像素：p - 假设你当然需要 64 像素 - 取决于 FAB 的大小

标签： javascript css vue.js vuejs2 vuetify.js

【解决方案1】：

您可以将它们放在一个固定的容器中，例如 v-navigation-drawer...

  <v-navigation-drawer stateless permanent floating fixed right>
        <v-btn fab dark color="primary" class="mb-2">
        </v-btn>
        <v-btn fab dark color="secondary">
        </v-btn>
  </v-navigation-drawer>

Demo

【讨论】：