Vuetify工具栏如何添加间隔，v-spacer失效的替代方案有哪些

版本适配说明 #

Vuetify 3对v-spacer组件的适用范围做了明确限制，该组件现在仅支持在v-row、v-col组成的网格布局系统中使用，旧版本中直接在工具栏等非网格容器中使用<v-spacer></v-spacer>的用法确实已经失效。

工具栏间距替代实现方案 #

• 自动填充间距（等效旧版v-spacer效果）：给工具栏右侧的按钮元素/按钮组添加ms-auto内置工具类，该类对应CSS属性margin-left: auto，会自动占用标题和按钮之间的全部剩余空间，将按钮推到工具栏最右侧，是最推荐的替代方案，用法示例：

  <v-app-bar>
    <v-toolbar-title>页面标题</v-toolbar-title>
    <v-btn class="ms-auto">操作按钮</v-btn>
  </v-app-bar>
  

• 自定义占位容器：在标题和按钮之间插入<div class="flex-grow-1"></div>，flex-grow-1类会让当前容器自动拉伸占用剩余空间，你也可以给这个div额外加宽度、边距属性调整间距效果，适合需要自定义间距规则的场景。
• 固定宽度间距：如果仅需要固定大小的间距，不需要把按钮推到最右侧，可以直接给工具栏标题添加me-*工具类，星号替换为1_{16的数值，对应4px}64px的右侧间距，比如<v-toolbar-title class="me-6">页面标题</v-toolbar-title>就能在标题右侧加24px的固定间距。

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