Vuetify.js：如何在左右卡片上放置按钮动作？

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>

密码笔