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

Vuetify.js: how to place button actions in v-card on left and right?

提问by Billal Begueradj

In v-card-actionscomponent of v-card, I want to place one button on the left and the other on the right using mr-0(margin-right= 0), but the 2 buttons always stay close to each other.

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

What I tried:

我试过的：

• Prop leftand rightfor the buttons
• v-spacercomponent between the buttons

• 道具left和right按钮
• v-spacer按钮之间的组件

Code:

代码：

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

代码笔。

How to solve this?

如何解决这个问题？

回答by roli roli

Your code is correct. Just use this:

你的代码是正确的。只需使用这个：

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

So just change the v-spacerto not be self-enclosing tag.

因此，只需将 更改v-spacer为非自封闭标签即可。

回答by Toodoo

Just wrap them in v-flexand add text-xs-rightclass to the second, to pull to the right the second button.

只需将它们包裹起来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

代码笔

---

---

Edit Vuetify 2.1.0(thanks to @J. Unkrass) :

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

Just wrap them in v-coland add text-rightclass to the second, to pull to the right the second button.

只需将它们包裹起来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>