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

Question

在 v-card 的 v-card-actions 组件中，我想使用 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 更改为非自封闭标签即可。