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

Question

在

v-card-actions

的

v-card

组件中，我想使用

mr-0

（margin-right= 0）将一个按钮放在左侧，另一个按钮放在右侧，但这 2 个按钮始终保持彼此靠近。

我尝试过的：

• 按钮的

  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-card-actions>
  <v-btn>Share</v-btn>
  <v-spacer></v-spacer>
  <v-btn>Explore</v-btn>
</v-card-actions>

将

v-spacer

更改为不是自封闭标签。

Answer 2

只需将它们包裹在

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>

代码笔

---

编辑 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>