在 Vuetify.js 中无法对齐 v-row 或 v-col 中的内容

Question

我在使用 Vuetify 在我的 Vue 应用程序中正确对齐事物时遇到问题。

<v-card class="mx-auto">
  <v-row>
    <v-col
      v-for="(item, i) in items"
      :key="i"
      align-end
      justify-end
    >
      <v-btn class="btn">
        <v-icon>{{ item.icon }}</v-icon>
        <span class="ml-2">{{ item.text }}</span>
      </v-btn>
    </v-col>
  </v-row>
  ...

我只是想把它向右对齐。

Answer 1

您在 <v-col> 上设置的属性不存在（即 align-end 和 justify-end）。它们是<v-row> 组件（它是一个弹性容器）上的属性。您需要改用类。

在选择组件属性时，请务必参考 Vuetify 组件页面上的 API->props 部分。

试试

<v-col class="d-flex justify-end">
    <v-btn>Button</v-btn>
</v-col>

请注意，对齐方式取决于 v-col 的宽度。如果 v-col 仅与按钮一样宽，则需要使用 cols="x" 属性设置宽度。

Answer 2

将direction: rtl 添加到您的v-btn，这里是codepen：

<template>
  <v-btn class="btn rtl">
  ...
  </v-btn>
</template>

<style>
.rtl { direction: rtl; }
</style>