更改 Vuetify 的按钮宽度和填充

【问题标题】：Changing Vuetify's Button Width And Padding更改 Vuetify 的按钮宽度和填充
【发布时间】：2017-11-16 13:46:04
【问题描述】：

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

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

转载Link

【问题讨论】：

【解决方案1】：

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

div.btn__content {
  padding: 0;
}

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您需要更改.btn 类的最小宽度并设置.btn-content 的padding-left: 16px。

【讨论】：

【解决方案4】：

您可能必须使用::v-deep

::v-deep .v-btn {
  padding-left: 12px;
  padding-right: 12px;
}

【讨论】：