css - 更改 Vuetify 的按钮宽度和填充

Question

按钮很大，超过卡片宽度

这应该很容易，但我在自定义卡片内的按钮时遇到了一些困难。我想删除所有填充，以便黑色边框很好地包含图标，而左侧/右侧没有任何额外空间。我试过添加自定义 css 和 !important 并直接覆盖 div.btn__content，但这些都不起作用。有什么想法可以尽可能简单地做到这一点吗？

复制 Link

Answer 1

问题是 .btn 类的 min-width。将其设置为 0 将允许按钮小于 88px。您还应该将 .btn__content 的 padding 设置为 0。

div.btn__content {
  padding: 0;
}

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

Here's an updated codepen.