如何实现Vuetify中v-btn-toggle组件按钮的垂直排列？

要实现垂直排列的v-btn-toggle，你只需要通过更精准的CSS选择器覆盖Vuetify的默认高度限制，同时保留代码可移植性：

1. 给v-btn-toggle添加自定义类名，比如vertical-btn-toggle：

<v-btn-toggle 
  class="vertical-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>

2. 编写优先级足够的自定义CSS：

/* 覆盖默认高度限制，让容器自适应内容高度 */
.vertical-btn-toggle.v-btn-group--density-default.v-btn-group {
  height: auto;
}

/* 设置按钮垂直排列 */
.vertical-btn-toggle {
  flex-direction: column;
  gap: 4px; /* 可选：给按钮之间添加间距，优化视觉效果 */
}

原理说明 #

Vuetify默认样式.v-btn-group--density-default.v-btn-group的优先级很高，单独使用.v-btn-toggle无法覆盖。通过将自定义类与Vuetify的默认选择器组合，能让你的自定义样式优先级更高，同时不会修改全局Vuetify默认配置，保证了代码的可移植性。

内容的提问来源于stack exchange，提问作者guilhem saint-gaudin