无法对齐 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

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

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

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

Answer 2

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

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

尝试

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

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

设置宽度

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

Trouble aligning content inside v-row or v-col in Vuetify.js

vue.js

nuxt.js

vuetify.js