更改 Vuetify 的按钮宽度和填充

Question

按钮很大，超出卡片宽度

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

复制Link

Answer 1

问题是 .btn class 的 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.

Answer 2

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

这是一个例子： https://codepen.io/anon/pen/zPEyLB

Answer 3

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

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

Answer 4

您可能需要使用 ::v-deep

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

更改 Vuetify 的按钮宽度和填充

Changing Vuetify's Button Width And Padding

css

vuejs2

vuetify.js