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

Question

在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.

如何解决？

Answer 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>

Answer 2

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

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

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