Vue.JS 使用 bootstrap 创建菜单

Question

您好，我在使用旧的 Vue 2 项目时创建了一个菜单。

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

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

new project not working css

folder structure

代码如下：

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

这里是 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>

Answer 1

加载 bootStrap 后，我需要导入

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

Vue.JS 使用 bootstrap 创建菜单

Vue.JS creating Menu with bootstrap

css

menu

vue.js

vue-component