【问题标题】：How to remove inside space from v-btn in Vuetify.js?如何从 Vuetify.js 中的 v-btn 中删除内部空间？
【发布时间】：2019-04-27 16:30:13
【问题描述】：

你好！ [已解决]

我正在尝试使用 Vue.js 和 Vuetify 重新创建一个页面，但我不知道如何使用我的按钮获得以下结果：

这是我的目标： https://i.imgur.com/CGkrz6R.png

这就是我现在拥有的： https://i.imgur.com/hKxkpOq.png

如您所见，我只需要删除按钮内的红色部分，以使它们保持更小并保持在一起，如下所示： https://i.imgur.com/Q6StwEE.png

如何从 v-btn 中删除此“内部填充”？

这是我的代码：

<v-card>
  <v-flex xs12>
    <v-img src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg"/>
  </v-flex>
  <v-card-text>
    {{ card.content }}
  </v-card-text>
  <v-card-actions>
    <v-btn small outline color="secondary" class="ma-0 text-capitalize">View</v-btn>
    <v-btn small outline color="secondary" class="ma-0 text-capitalize">Edit</v-btn>
  </v-card-actions>
</v-card>

谢谢大家！！

【问题讨论】：

您使用pa-0 删除填充。但似乎你的问题与预设min-width有关，所以设置min-width: 0。
这个style="min-width: 0" 工作得很好！谢谢大佬！
顺便说一句，这里的做法是在答案部分写答案，而不是用解决方案编辑问题。问题应该只描述一个问题。你可以回答你自己的问题，没有错。

标签： vue.js vuetify.js

【解决方案1】：

Vue.directive('no-padding', {
  bind: (el, bindings) {
    el.style.padding = 0
  }
})

<v-btn small no-padding outline color="secondary" class="ma-0 text-capitalize">View</v-btn>

【讨论】：

Vuetify 已经使用了pa-0 类，不需要指令。这种方法看起来很奇怪，但无论如何，OP的问题似乎与最小宽度有关。请参阅我对这个问题的评论。
感谢您的帮助，我只需要style="min-width: 0"，现在已经完成了。再次感谢！

【解决方案2】：

解决问题

怎么做，感谢Traxo。创建以下类就足够了：

<style scoped>
  .together{
    min-width: 0
  }
</style>

然后使用它：

<v-btn small outline color="secondary" class="together ma-0 text-capitalize">Edit</v-btn>

【讨论】：