Css Vue.JS使用引导创建菜单

嗨，我在旧的Vue 2项目上创建了一个菜单

创建新的Vue 2项目（将很快迁移到Vue3）我导入了我的菜单。HTML+CSS。 由于某些原因，这不能正常工作。有些CSS正在工作，有些没有请参见下面的屏幕截图。谁能告诉我我错过了什么/没有看到什么。。。。已经好几个小时了

这两个项目之间的唯一区别是第一个项目没有使用路由。第二个是路由

代码如下：

<template>
  <div id="custom-bootstrap-menu" class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Calvue</a>
        <button
          type="button"
          class="navbar-toggle"
          data-toggle="collapse"
          data-target=".navbar-menubuilder"
        >
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse navbar-menubuilder">
        <ul class="nav navbar-nav navbar-left">
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/products">Products</a>
          </li>
          <li>
            <a href="/about-us">About Us</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style>
#custom-bootstrap-menu.navbar-default .navbar-brand {
  color: rgba(255, 98, 0);
}
#custom-bootstrap-menu.navbar-default {
  font-size: 14px;
  background-color: rgba(248, 248, 248, 1);
  border-bottom-width: 1px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > a {
  color: rgba(51, 51, 51, 1);
  background-color: rgba(248, 248, 248, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav > li > a:focus {
  color: rgba(51, 51, 51, 1);
  background-color: rgba(194, 194, 194, 1);
  background: -webkit-linear-gradient(
    top,
    rgba(255, 98, 0) 0%,
    rgb(255, 255, 255) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 98, 0) 0%,
    rgb(255, 255, 255) 100%
  );
}
#custom-bootstrap-menu.navbar-default .navbar-nav > .active > a,
#custom-bootstrap-menu.navbar-default .navbar-nav > .active > a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav > .active > a:focus {
  color: rgba(51, 51, 51, 1);
  background-color: rgba(194, 194, 194, 1);
  background: -webkit-linear-gradient(
    top,
    rgba(102, 102, 102, 1) 0%,
    rgba(194, 194, 194, 1) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(102, 102, 102, 1) 0%,
    rgba(194, 194, 194, 1) 100%
  );
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
  border-color: #c2c2c2;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
  background-color: #c2c2c2;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
  background-color: #c2c2c2;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
  background-color: #f8f8f8;
}
</style>

切换导航








#自定义-bootstrap-menu.navbar-default.navbar品牌{
颜色：rgba（255,98,0）；
}
#自定义-bootstrap-menu.navbar-default{
字体大小：14px；
背景色：rgba（2482482481）；
边框底宽：1px；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>li>a{
颜色：rgba（51,51,51,1）；
背景色：rgba（2482482481）；
}
#自定义-bootstrap-menu.navbar-default.navbar-nav>li>a:悬停，
#自定义-bootstrap-menu.navbar-default.navbar-nav>li>a:focus{
颜色：rgba（51,51,51,1）；
背景色：rgba（1941941941941）；
背景：-webkit线性梯度(
顶部
rgba（255,98,0）0%，
rgb（255、255、255）100%
);
背景：线性梯度(
归根结底，
rgba（255,98,0）0%，
rgb（255、255、255）100%
);
}
#自定义-bootstrap-menu.navbar-default.navbar nav>.active>a，
#自定义-bootstrap-menu.navbar-default.navbar-nav>.active>a:悬停，
#自定义-bootstrap-menu.navbar-default.navbar-nav>.active>a:焦点{
颜色：rgba（51,51,51,1）；
背景色：rgba（1941941941941）；
背景：-webkit线性梯度(
顶部
rgba（102102102,1）0%，
rgba（1941941941941）100%
);
背景：线性梯度(
归根结底，
rgba（102102102,1）0%，
rgba（1941941941941）100%
);
}
#自定义-bootstrap-menu.navbar-default.navbar切换{
边框颜色：#C2C2；
}
#自定义-bootstrap-menu.navbar-default.navbar切换：悬停，
#自定义-bootstrap-menu.navbar-default.navbar切换：焦点{
背景色：#C2C2；
}
#自定义-bootstrap-menu.navbar-default.navbar切换.图标栏{
背景色：#C2C2；
}
#自定义-bootstrap-menu.navbar-default.navbar切换：悬停。图标栏，
#自定义-bootstrap-menu.navbar-default.navbar切换：焦点。图标栏{
背景色：#F8；
}

这是App.vue代码

<template>
  <div id="app">

      <app-menu></app-menu>
    <router-view/>
  </div>
</template>

<script>
import menu from "./components/menu";
export default {
  name: 'App',
  components: {
    appMenu: menu,
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

</style>

从“/components/menu”导入菜单；
导出默认值{
名称：“应用程序”，
组成部分：{
appMenu:menu，
}
}
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
}

加载引导程序时，我需要导入

import BootstrapVue from "bootstrap-vue"
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.use(BootstrapVue)

---

导入index.js而不是main.js

导入/加载引导css和javascript了吗？是的，我这么做了，但感谢你的评论，这让我重新审视了这一点。我从main.js中的“bootstrap vue”导入“bootstrap/dist/css/bootstrap.min.css”导入“bootstrap vue/dist/bootstrap vue.css”，应该是index.js！问题已解决：）