更改 Vuetify 的按钮宽度和填充

Question

按钮很大并且超过卡片宽度

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

复制 链接

原文由 stormynpip 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 div.btn__content {
  padding: 0;
}

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

这是一个更新的代码笔。

原文由 thanksd 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 Nightfury 发布，翻译遵循 CC BY-SA 4.0 许可协议