更改Vuetify的按钮宽度和填充

Question

按钮很大，超过了卡片的宽度

这应该很容易，但是自定义卡中的按钮时我遇到了一些困难。我想删除所有填充，以使黑色边框很好地包围图标，而左侧/右侧没有任何多余的空间。我尝试添加自定义CSS并!important直接覆盖div.btn__content，但是这些无效。有什么想法可以做到这一点尽可能简单吗？

复制链接

Answer 1

这个问题是min-width在的.btn类。将其设置为0可使按钮小于88px。你也应该只是设定padding的.btn__content到0。

div.btn__content {
  padding: 0;
}

div.card__actions .btn {
  min-width: 0;
}

这是更新的代码笔。

Answer 2

对于较新版本的 Vuetify（1.2.4 及更高版本），您需要使用：

/* turn off min-width for all buttons */
.v-btn {
  min-width: 0;
}