时间戳

首页 > 解决方案 > Vuetify v-bottom-navigation：将按钮靠得更近？

css - Vuetify v-bottom-navigation：将按钮靠得更近？

问题描述

在某些移动设备（例如 iPhone 5/SE）上，vuetifyv-bottom-navigation如下所示：

在此处输入图像描述

为防止这种情况，我想将按钮靠得更近，使其在其他设备上看起来像：

在此处输入图像描述

我的方法是通过small道具/类，但没有奏效：

<v-bottom-navigation>

  <v-btn small>
    <v-icon>mdi-home-outline</v-icon>
  </v-btn>
  <!-- ... more buttons here ... -->

</v-bottom-navigation>

标签： cssvue.jsvuetify.js

解决方案

您可以覆盖按钮的填充和最小宽度并根据您的需要进行调整：

<v-bottom-navigation>

  <v-btn class="my-btn" small>
    <v-icon>mdi-home-outline</v-icon>
  </v-btn>
  <!-- ... more buttons here ... -->

</v-bottom-navigation>

.v-btn.my-btn {
  min-width: 20px !important;
}

还要看看组件 API 和SASS 变量

推荐阅读