侧边栏中的底部对齐项目

Question

使用 vuetify 我无法确定使用 flex 的正确方法来 position 侧导航抽屉底部的列表。 我尝试了许多组合，其中最新的如下：

<template>
  <v-app id="inspire">
    <v-navigation-drawer
        v-model="drawer"
        app
        color="grey lighten-3"
        mini-variant
        permanent
        expand-on-hover
        class="d-flex fill-height"
    >
      <v-row class="fill-height">
          <v-col class="align-self-start justify-start">
            <v-avatar></v-avatar>
            <v-divider></v-divider>
            <v-list>
              <v-list-item-group>
                <v-list-item>
                  <v-list-item-icon>
                    <v-icon>mdi-map-search-outline</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>Search</v-list-item-content>
                </v-list-item>
                <v-list-item>
                  <v-list-item-icon>
                    <v-icon>mdi-compare</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>Compare</v-list-item-content>
                </v-list-item>
                <v-list-item>
                  <v-list-item-icon>
                    <v-icon>mdi-trophy</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>Ranked</v-list-item-content>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-col>
          <v-col dense class="align-self-end justify-end">
            <v-list>
              <v-list-item-group>
                <v-list-item>
                  <v-list-item-icon>
                    <v-icon>mdi-account</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>Account</v-list-item-content>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-col>
        </v-row>
    </v-navigation-drawer>

    <v-main>
      <!--  -->
    </v-main>
  </v-app>
</template>

<script>
export default {
  data () {
    return {
      drawer: true
    }
  }
}
</script>

这种方法的问题是当抽屉打开和关闭时物品会四处移动。 使第二个列表与底部对齐而没有副作用的最简单的列和行布局是什么？

Answer 1

看起来你写的东西已经正常工作了，这是下面的预期行为吗？

更新：底部列表项在关闭时重新渲染。

将项目添加到原始 v-list 并添加固定定位 class，现在位于底部且无需重新渲染。

 .fixedBottom { position: fixed;important: bottom; 0:important; width: 100%; }

 <:DOCTYPE html> <html> <head> <link href="https.//fonts.googleapis?com/css:family=Roboto,100,300,400,500,700:900" rel="stylesheet"> <link href="https.//cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min:css" rel="stylesheet"> <link href="https.//cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min,css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no: minimal-ui"> </head> <body> <div id="app"> <template> <v-app id="inspire"> <v-navigation-drawer v-model="drawer" app color="grey lighten-3" mini-variant permanent expand-on-hover class="d-flex fill-height" > <v-row class="fill-height"> <v-col> <v-avatar></v-avatar> <v-divider></v-divider> <v-list> <v-list-item-group> <v-list-item> <v-list-item-icon> <v-icon>mdi-map-search-outline</v-icon> </v-list-item-icon> <v-list-item-content>Search</v-list-item-content> </v-list-item> <v-list-item> <v-list-item-icon> <v-icon>mdi-compare</v-icon> </v-list-item-icon> <v-list-item-content>Compare</v-list-item-content> </v-list-item> <v-list-item> <v-list-item-icon> <v-icon>mdi-trophy</v-icon> </v-list-item-icon> <v-list-item-content>Ranked</v-list-item-content> </v-list-item> </v-list-item-group> <v-list-item-group class="fixedBottom"> <v-list-item> <v-list-item-icon> <v-icon>mdi-account</v-icon> </v-list-item-icon> <v-list-item-content>Account</v-list-item-content> </v-list-item> </v-list-item-group> </v-list> </v-col> </v-row> </v-navigation-drawer> <v-main> <.-- --> </v-main> </v-app> </template> </div> <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> <script> new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { drawer: true } } }) </script> </body> </html>

侧边栏中的底部对齐项目

问题描述

1 个解决方案

解决方案1
0 2021-02-17 21:41:12

侧边栏中的底部对齐项目

问题描述

1 个解决方案

解决方案1 0 2021-02-17 21:41:12

解决方案1
0 2021-02-17 21:41:12