你好！ [已解决]

Question

你好！ [已解决]

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

这就是我现在拥有的： 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>

谢谢你们！

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

Answer 2

解决问题

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

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

然后使用它：

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

如何从Vuetify.js中的v-btn删除内部空间？

你好！ [已解决]

2 个答案:

解决问题