如何在列中定位元素以结束（Vuetify）？

Question

如何将两个按钮都放在各自列的下方？

默认情况下，按钮在每列中的位置开始。

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-row justify="center"
       style="border: 1px solid;">
        <v-col 
          cols="12"
          sm="4"
          style="border: 1px solid red;"
        >
          <v-btn>Ok</v-btn>
        </v-col>
        <v-col 
          cols="12"
          sm="4"
          style="border: 1px solid blue;"
        >
          <v-btn>Cencel</v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

Codepen.

Answer 1

只需将align="end"添加到v-col中的每个。 这是working codepen。

因为v-col只是display: flex; flex-direction: column;。不用v-row来使用justify来对齐元素，而是使用v-col来使用align。

Answer 2

方法1：如果要放置行内元素（例如文本），请向两个class="text-right"元素中添加<v-col>。

选项2：将class="d-flex justify-end"添加到两个<v-col>元素中，以定位块元素。

由于<v-btn>元素很可能显示为行内块元素，因此这两个选项都将起作用。