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

Question

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

我试过了v-divider；但是，app-bar的分隔线和底线之间总是有一个space，我无法设置分隔线的粗细和颜色。

<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的底边框试了一下，但是不显示边框。代码：

<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;

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

My border-bottom is not displayed in Vuetify

css

vue.js

nuxt.js

vuetify.js