为什么底部对齐在 v-content 中不起作用？

Question

我正在尝试对齐四个文本，每个角一个（如名称所示）。 TopLeft 和 TopRight 在正确的位置对齐，但 BottomLeft 和 BottomRight 就在它们下方，而不是在页面底部。..

 <v-content>
      <v-container fluid fill-height >
        <v-row align='start'>
          <v-col cols='1'>
            <p>TopLeft</p>
          </v-col>
          <v-col cols='10'>
          </v-col>
          <v-col cols='1'>
            <p>TopRight</p>
          </v-col>
        </v-row>
        <v-row align='end'>
          <v-col cols='1'>
            <p>BottomLeft</p>
          </v-col>
          <v-col cols='10'>
          </v-col>
          <v-col cols='1'>
            <p>BottomRight</p>
          </v-col>
        </v-row>
      </v-container>
    </v-content>

我做错了什么？ 谢谢

Answer 1

我认为你有一个错字。它应该是fill-height 而不是full-height。

编辑 1：

align 仅对齐行的内容。您还必须将行与align-self 对齐：

const app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
      <v-container fluid fill-height>
        <v-row align='start' class="align-self-start">
          <v-col cols='1'>
            <p>TopLeft</p>
          </v-col>
          <v-col cols='10'>
          </v-col>
          <v-col cols='1'>
            <p>TopRight</p>
          </v-col>
        </v-row>
        <v-row align='end' class="align-self-end">
          <v-col cols='1'>
            <p>BottomLeft</p>
          </v-col>
          <v-col cols='10'>
          </v-col>
          <v-col cols='1'>
            <p>BottomRight</p>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
    </v-app>
</div>