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

【问题标题】：Vuetify v-bottom-navigation: Move buttons closer together?Vuetify v-bottom-navigation：将按钮靠得更近？
【发布时间】：2021-01-03 11:04:02
【问题描述】：

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

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

我的方法是通过small prop / 类但它不起作用：

<v-bottom-navigation>

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

</v-bottom-navigation>

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

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

<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 variables

【讨论】：