vuetify.js - 如何将内容对齐到 v-col 内部？

Question

文档中justify-** 和align-** 是为了判断grid block应该放在什么位置而设计的，但是如何让v-col里面的内容右对齐呢？

Answer 1

这是一个在 v-col 中将内容右对齐的小例子(在本例中是一个关闭按钮):

<v-row>
    <v-col align="right">
        <v-btn color="error">X</v-btn>
    </v-col>
</v-row>

或多列:

<v-row>
    <v-col cols="9">
        <h2>Title</h2>
    </v-col>
    <v-col cols="3" align="right">
        <v-btn color="error">X</v-btn>
    </v-col>
</v-row>

所以你只需要添加

align="right"

作为 v-col 的参数，用于将内容对齐到 v-col 中的右侧。