Vuetify 垂直间距

Question

11/10 可能今天已经太晚了，我处于白痴模式，但我们开始了......

我有一个导航链接列表（v-list 中的 v-list-item）...

我试图强制其中一个链接位于抽屉底部。由于某种原因，即使自定义 CSS 也无法移动它，所以我陷入了困境。

这就是我所拥有的，任何帮助表示赞赏：

 <v-navigation-drawer v-model="drawer" app clipped>
  <v-list>
    <!-- Navbar is displayed with for loop -->
    <v-list-item
      link
      v-for="(link, index) in links"
      :key="index"
      router
      :to="link.route"
    >
      <v-list-item-action>
        <v-icon>mdi-{{ link.icon }}</v-icon>
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title>{{ link.name }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>

    <v-list-item
      link
      router
      :to="'/feature-request'"
      class="text--disabled"
      :align-self="end"
    >
      <v-list-item-action>
        <v-icon class="text--secondary">mdi-star-circle-outline</v-icon>
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title class="text--secondary"
          >Feature Request</v-list-item-title
        >
      </v-list-item-content>
    </v-list-item>
  </v-list>
</v-navigation-drawer>

Answer 1

你可以使用flex来实现你想要的。对于最后一个项目，设置 class mt-auto，将最后一个项目放在底部。这里仍然有一个问题，v-list-item有一个内置的flex类属性，所以你需要重写它：

.v-list-item {
  flex: 0;
}

因此将 list 设置为全高并放置 flex：

<v-list class="d-flex flex-column" height="100%">

迭代第一个项目，对于最后一个项目，放置上述内容mt-auto：

<v-list-item class="mt-auto">

一个CODEPEN供您参考。