创建一个 v-btn-toggle，其按钮垂直对齐，而不是水平对齐

Question

我目前正在尝试使用 VueJS 和 Vuetify 创建一个测验。我正在尝试垂直排列用户可以选择的答案。为此，我尝试使用 v-btn-toggle 组件。但是，v-btn-toggle 组件的按钮默认水平对齐。如果可以的话，我想知道如何垂直排列。

这是我的布局：

<v-btn-toggle v-model="toggle_multiple" multiple>
    <v-btn>
         Answer 1
    </v-btn>
    <v-btn>
         Answer 2
    </v-btn>
    <v-btn>
         Answer 3
    </v-btn>
    <v-btn>
        Answer 4
    </v-btn>
</v-btn-toggle>

这是我的风格，正如这个问题中所推荐的：

.v-btn-toggle{
    flex-direction: column;
}

我尝试过的答案给了我奇怪的结果，因为答案只显示到第二个答案半，如下所示： 我的失望

如有任何帮助，我们将不胜感激。

编辑：

我发现我的问题来自 vuetify 的默认 css

.v-btn-group--density-default.v-btn-group {
  height: 48px;
}

它阻止我制作高度超过 48 像素的组按钮。

我不想更改 vuetify 的默认设置（出于可移植性问题），所以现在我尝试覆盖默认的 css。不幸的是，即使我添加了自己的 css，该页面仍然使用 vuetify 的 css 而不是我的，如下图所示

Answer 1

OP 发现 Vuetify 有一些默认的 48 像素高度。
在仔细检查了 Flexbox 的整个过程是否按预期工作后，由于CSS 特异性，我们将范围缩小到覆盖本地默认值。

OP 有一个可行的解决方案，通过使用

定位给定按钮

#my-button-group {
  height: auto;
}

另一种选择是使用

button.v-btn-group--density-default.v-btn-group

。