如何将Vuetify中垂直排列的tabs标签页对齐到右侧

Vuetify的right属性仅对水平排列的标签页生效，和vertical属性搭配时不会触发布局调整，可通过以下两种方案实现垂直标签页靠右排列：

方案1：使用Vuetify内置flex工具类（无需自定义CSS） #

直接给v-tabs组件添加内置的flex布局类即可快速实现：

<v-tabs
  vertical
  <!-- 核心类：flex横向排列 + 反向布局，把标签栏放到右侧 -->
  class="d-flex flex-row-reverse"
>
  <v-tab>标签1</v-tab>
  <v-tab>标签2</v-tab>

  <v-tab-item>对应内容1</v-tab-item>
  <v-tab-item>对应内容2</v-tab-item>
</v-tabs>

如果需要调整标签栏和内容区的间距，可额外添加ml-3/pl-4这类Vuetify内置间距类调整即可。

方案2：自定义CSS覆盖默认样式 #

如果需要更精细的样式控制，可给v-tabs加自定义类后调整样式：

<v-tabs
  vertical
  class="right-vertical-tabs"
>
  <!-- 标签、内容同上 -->
</v-tabs>

对应样式：

/* Vuetify 2版本 */
.right-vertical-tabs {
  flex-direction: row-reverse;
}
.right-vertical-tabs .v-tabs-bar {
  /* 可选：调整标签栏宽度 */
  width: 120px;
}

/* Vuetify 3版本 */
.right-vertical-tabs {
  flex-direction: row-reverse;
}
.right-vertical-tabs .v-tabs__bar {
  width: 120px;
}

两种方案都兼容响应式布局，不需要额外调整其他属性即可正常使用。

内容的提问来源于stack exchange，提问作者Wytamma Wirth