vuetify，菜单元素之间 space

Question

在左侧汉堡菜单中，我想将注销按钮与所有其他元素分开。虽然所有其他元素都在菜单的顶部，但注销按钮需要在菜单的最底部并且有一个小的 margin-bottom: 10px 的外观。

我试过使用 display flex 和 justify content，但似乎不起作用。我是 vuetify 的新手，所以我肯定遗漏了一些很明显的东西。

非常欢迎任何建议。

此处为 Codepen 示例：https://codepen.io/jonathank2018/pen/abVdZPW?editors=101

<div id="app">
  <v-app id="inspire" >
    <v-card
      style="width: 100%;"
      class="mx-auto overflow-hidden"
      height="400"
    >
      <v-app-bar
        color="deep-grey"
        dark
      >
        <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
  
        <v-col
          class="d-flex"
          cols="12"
          sm="2"
        >
          <v-select
            flat   
            style="margin-top:20px; "
            :items="items"
            label="My View"
          ></v-select>
        </v-col>
        
        
        <v-spacer></v-spacer>
  
        <v-btn icon>
          <v-icon>mdi-share-variant</v-icon>
        </v-btn>
        
        <v-btn icon>
          <v-icon>mdi-download</v-icon>
        </v-btn>
        
        <v-btn icon>
          <v-icon>mdi-heart-outline</v-icon>
        </v-btn>
  
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
        
      </v-app-bar>
  
      <v-navigation-drawer
        style="border-radius: 20px;margin: 10px;"
        dark
        v-model="drawer"
        absolute
        temporary
      >
        <div style="display:flex; justify-content: space-between; flex-direction: column">
        <v-list
          nav
          dense
        >
          <v-list-item-group
            v-model="group"
            active-class="deep-purple--text text--accent-4"
          >
            <v-list-item>
              <v-title style="font-size: 1em;">Hello Mike!</v-title>
            </v-list-item>
            
            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-circle</v-icon>
              </v-list-item-icon>
              <v-list-item-title>whatever</v-list-item-title>
            </v-list-item>
  
            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-file-document</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Articles</v-list-item-title>
            </v-list-item>
            
            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-email</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Emails</v-list-item-title>
            </v-list-item>
            
            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-cog</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Admin</v-list-item-title>
            </v-list-item>
            
            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-help-circle</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Help</v-list-item-title>
            </v-list-item>
            
          </v-list-item-group>
        </v-list>
        
        
        <v-btn
        rounded       
        style="display: block; margin-left: auto;
        margin-right: auto; width: 85%; font-size: 1em;text-transform: unset !important;"
        dark
        elevation=0
        color="#424242"
      >
        Logout
      </v-btn>
        </div>
        
      </v-navigation-drawer>
    </v-card>
  </v-app>
</div>

Answer 1

你几乎什么都自己做了。

只需将 height: 100% 添加到您的列表包装器 div 并将助手 class mb-5（或在样式属性中应用 margin-bottom）应用于注销按钮。

<div style="display:flex; justify-content: space-between; flex-direction: column; height: 100%">
...
  <v-btn
    rounded       
    style="display: block; margin-left: auto;
    margin-right: auto; width: 85%; font-size: 1em;text-transform: unset !important;"
    dark
    elevation=0
    color="#424242"
    class="mb-5"
  >
    Logout
  </v-btn>
</div>
...

测试这个 at CodePen。

vuetify，菜单元素之间 space

vuetify, space between menu elements

css

vuetify.js