时间戳

首页 > 解决方案 > Vuetify v-container 与填充高度项目对齐

vuetify.js - Vuetify v-container 与填充高度项目对齐

问题描述

我是 Vue 和 Vuetify 的新手，这可能很明显，但我在谷歌上搜索了一个多小时，我仍然很愚蠢。所以基本上我想使用视口的全高创建包装器，其中一个元素对齐顶部和一个底部（这将在 v-navigation-drawer 内，顶部和一个底部的几个按钮）

这是示例代码

 <v-container fluid fill-height>
   <v-row align="start">
     <v-col>I want this to align Top</v-col>  
   </v-row>
   <v-row align="end">
     <v-col>And this to align Bottom</v-col>  
   </v-row>
 </v-container>

这就是它的外观https://codepen.io/rafal_w/pen/ExXeeWm

如您所见，填充高度标签将元素与边距均匀放置，而元素上的对齐标签不起作用。我做错了什么？

标签： vuetify.js

解决方案

好的，所以我应该使用 align-self-start 和 align-self-end 类而不是子项上的对齐标签

https://codepen.io/rafal_w/pen/WNOaXVL

  <v-container fluid fill-height>
    <v-row class="align-self-start">
      <v-col>I want this to align Top</v-col>  
    </v-row>
    <v-row class="align-self-end">
      <v-col>And this to align Bottom</v-col>  
    </v-row>
  </v-container>

推荐阅读