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 来实现你想要的。对于最后一项，设置类mt-auto，它将最后一项放在底部。这里还有一个gotcha，v-list-item 有一个内置的flex 类属性，所以你需要覆盖它：

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

所以将列表设置为全高并放置弹性：

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

按照你的方式迭代第一个项目，对于最后一个项目，放置前面提到的mt-auto：

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

CODEPEN 供您参考。