如何强制动作到Vue3 Quasar水平卡的右侧

Question

有谁知道如何通过类星体类或 Flexbox 的小标题让动作转到最右侧？如果我替换右侧的文本，它会将操作推倒，但无论如何我都希望它们位于最右侧

Codepen：https://codepen.io/starlilycoco/pen/ZEZRLOE?editors=111

<div class="q-pa-md row items-start q-gutter-md">
    <q-card class="my-card" flat bordered>
      <q-card-section horizontal>
        <div>Title</div>

        <q-card-actions vertical align="right" class="justify-around q-px-md">
          <q-btn flat round color="red" icon="favorite"></q-btn>
          <q-btn flat round color="accent" icon="bookmark"></q-btn>
          <q-btn flat round color="primary" icon="share"></q-btn>
        </q-card-actions>
      </q-card-section>
    </q-card>
  </div>

Answer 1

将

flex

和

justify-between

类添加到您的

<q-card-section horizontal>

中，如下所示：

<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md row items-start q-gutter-md">
    <q-card class="my-card" flat bordered>
      <q-card-section horizontal class="flex justify-between">
        <div>Title</div>

        <q-card-actions vertical align="right" class="justify-around q-px-md">
          <q-btn flat round color="red" icon="favorite"></q-btn>
          <q-btn flat round color="accent" icon="bookmark"></q-btn>
          <q-btn flat round color="primary" icon="share"></q-btn>
        </q-card-actions>
      </q-card-section>
    </q-card>
  </div>
</div>