Почему выравнивание по низу не работает в v-контенте? - PullRequest
Новая
       4

Почему выравнивание по низу не работает в v-контенте?

0 голосов
/ 25 мая 2020

Я пытаюсь выровнять четыре текста, по одному в каждом углу (как указывают названия). 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>

Что я делаю неправильно? Спасибо

1 Ответ

1 голос
/ 25 мая 2020

Думаю, у вас опечатка. Это должно быть fill-height вместо full-height.

Edit 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>
...