如何将内容与 v-col 内的右侧对齐？

Question

文档中，justify-**和align-**是为了确定网格块应该放置在哪里而设计的，但是如何使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>

所以你只需要添加

对齐=“右”

作为 v-col 的参数，将内容与 v-col 内的右侧对齐。

Answer 2

这件事有点晚了。我来这里寻求解决方案，最终选择了 RTM。align="right" 不适用于 v-col 内的所有组件。左/右/中心对齐的方法是使用 v-spacer。如果要右对齐，请在 v-col 内组件的左侧添加一个 v-spacer。v-col 还需要 d-flex 类。

<v-app>
  <v-container>
    <v-row>
      <v-col cols="8">
      </v-col>
      <v-col class="d-flex" cols="4">
        <v-spacer />
        <!-- insert any other content here to right align inside this col -->
      </v-col>
    </v-row>
  </v-container>
<v-app>

.text-right如果您尝试对齐按钮或文本，您还可以添加该类