Vuetify.js：如何在左右两侧的 v-card 中放置按钮操作？

Posted 2023-02-16

【中文标题】Vuetify.js：如何在左右两侧的 v-card 中放置按钮操作？

【英文标题】：Vuetify.js: how to place button actions in v-card on left and right?

【发布时间】：2019-04-02 06:49:43

【问题描述】：

在v-card 的v-card-actions 组件中，我想使用mr-0 (margin-right= 0) 将一个按钮放在左侧，另一个放在右侧，但是这两个按钮总是彼此靠近.

我尝试了什么：

为按钮提供 left 和 right v-spacer 按钮之间的组件

代码：

<v-card>
  <v-card-title primary-title>
    <div>
      <h3 class="headline mb-0">Ttile</h3>
      <div>Located two hours south of Sydney in the <br>Southern Highlands of New South </div>
    </div>
  </v-card-title>

  <v-card-actions>
    <v-btn left>Share</v-btn>
    <v-spacer />
    <v-btn right>Explore</v-btn>
  </v-card-actions>
</v-card>

Codepen.

如何解决？

【参考方案1】：

只需将它们包装在v-flex 中，然后将text-xs-right 类添加到第二个，将第二个按钮拉到右侧。

<v-card-actions>
    <v-flex>
      <v-btn>Share</v-btn>
    </v-flex>
    <v-flex class="text-xs-right">
      <v-btn>Explore</v-btn>
    </v-flex>
</v-card-actions>

CodePen

---

编辑 Vuetify 2.1.0（感谢@J. Unkrass）：

只需将它们包装在 v-col 中，然后将 text-right 类添加到第二个，将第二个按钮拉到右侧。

<v-card-actions>
    <v-col>
      <v-btn>Share</v-btn>
    </v-col>
    <v-col class="text-right">
      <v-btn>Explore</v-btn>
    </v-col>
</v-card-actions>

【讨论】：

我使用的是 Vuetify 2.1.0，由于后者的更新之一，text-xs-right 现在应该是text-right，因为不再需要指定 xs。如果您想以 sm 宽度开始使用它，您可以使用 text-sm-right 及以上。希望这会对某人有所帮助，因为我在更新后一开始就遇到了这个问题。

另外我认为 <v-flex> 现在应该是 <v-col> 但 <v-flex> 仍然可以正常工作。

【参考方案2】：

您的代码是正确的。就用这个吧：

      <v-card-actions>
        <v-btn>Share</v-btn>
        <v-spacer></v-spacer>
        <v-btn>Explore</v-btn>
      </v-card-actions>

所以只需将v-spacer 更改为不是自封闭标签。

【讨论】：

这很奇怪，我虽然v-spacer 是一个自封闭组件。谢谢

这很奇怪，自封闭符号对我有用（使用 Vueitfy 2.4.0）。

@Haltarys 很奇怪。请参阅此 CodePen ⇾ codepen.io/Roland1993/pen/qBmZKJP?editors=1011，即使在 2.4.0 中也无法使用。