css - 我的 border-bottom 没有显示在 Vuetify 中

Question

我正在使用 Vuetify 在 nuxt.js 中开发一个网站。我使用 v-app-bar 创建了一个应用栏，我想在它下面添加一条白线。我想要它是因为我会将链接作为扩展名放在标题下，我想将它们分开。

我试过v-divider；但是，应用栏的分隔线和底线之间总是有一个空格，我无法设置分隔线的粗细和颜色。

<v-app-bar
  color="black"
  app
>
    <v-row>
    <v-app-bar-nav-icon class="d-lg-none"></v-app-bar-nav-icon>
    <v-spacer />
    <v-app-bar-title
      class="text-no-wrap text-h3"
      style="width: fit-content;">
      Title
    </v-app-bar-title>
    <v-spacer />
    <v-col
        cols="12"
        class="pb-0 pt-1">
          <v-divider></v-divider>
    </v-col>
    </v-row>
</v-app-bar>

然后我用v-app-bar__content的bottom border试了一下，border不显示。代码:

<template>
    <v-app-bar
    color="black"
    app
    >
    <v-app-bar-nav-icon class="d-lg-none"></v-app-bar-nav-icon>
    <v-spacer />
    <v-app-bar-title
      class="text-no-wrap text-h3"
      style="width: fit-content;">
      Title
    </v-app-bar-title>
    <v-spacer />
    </v-app-bar>
</template>

<style>
.v-toolbar__content{
    border-bottom-width: 2px;
    border-color: white;
}
</style>

如何在 app-bar__content 的底部边框上精确地添加一条白线？

Answer 1

您需要指定边框的类型，因此这应该可以解决您的问题

border-bottom: 8px solid white;