如何去除Vuetify中<v-card-actions>的全屏宽度？

我有一个卡片，鼠标悬停时会显示一个工具栏。当前该工具栏会扩展至全屏宽度，我希望它像标签一样仅占据内容宽度。尝试给<v-card-actions>或其父组件<v-card>添加d-inline-block辅助类，但未生效。

复现代码 #

<template>
  <v-app>
    <v-main>
      <div class="py-12"></div>
      <v-container>
        <v-menu open-on-hover location="top" transition="slide-y-transition">
          <template v-slot:activator="{ props }">
            <v-card v-bind="props" variant="outlined">
              <v-card-title>Card goes here</v-card-title>
            </v-card>
          </template>

          <v-card variant="outlined" class="ml-4">
            <v-card-actions>
              <v-btn icon="mdi-link-variant-minus" size="small" color="error" />
              <v-btn icon="mdi-arrow-expand" size="small" color="primary" class="ml-4" />
            </v-card-actions>
          </v-card>
        </v-menu>
      </v-container>
    </v-main>
  </v-app>
</template>

期望效果 #

目标效果类似以下代码实现的行内块级元素表现：

<div style="background:red">I don't want this</div>
<div style="display: inline-block; background:red; margin-top: 24px">I want this</div>

解决方案 #

问题根源在于v-menu的弹出内容容器默认是块级元素，会占满父容器宽度。只需两步修改即可实现需求：

1. 给v-menu添加content-class="d-inline-block"，将弹出内容容器改为行内块级元素
2. 给工具栏对应的v-card添加shrink类，确保卡片收缩至内容宽度

修改后的完整代码：

<template>
  <v-app>
    <v-main>
      <div class="py-12"></div>
      <v-container>
        <v-menu open-on-hover location="top" transition="slide-y-transition" content-class="d-inline-block">
          <template v-slot:activator="{ props }">
            <v-card v-bind="props" variant="outlined">
              <v-card-title>Card goes here</v-card-title>
            </v-card>
          </template>

          <v-card variant="outlined" class="ml-4 shrink">
            <v-card-actions>
              <v-btn icon="mdi-link-variant-minus" size="small" color="error" />
              <v-btn icon="mdi-arrow-expand" size="small" color="primary" class="ml-4" />
            </v-card-actions>
          </v-card>
        </v-menu>
      </v-container>
    </v-main>
  </v-app>
</template>

说明 #

• content-class是v-menu的专属属性，用于自定义弹出内容容器的样式，d-inline-block让容器不再强制占满宽度
• shrink是Vuetify内置辅助类，通过设置flex-shrink: 1确保卡片根据内部按钮的宽度自动收缩，而非拉伸填充容器

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