Question

我正在使用vuejs创建导航栏的组件，该组件使用引导程序并且不会折叠。我使用npm安装了Bootstrap和jquery，但不确定是否可能是原因，因为在其他组件中，我所做的一切都很好。当我尝试使用移动版本或PC上的窗口尺寸缩小时，会出现问题

Navbar.vue代码：

<template>
  <div class="hello">
    <nav class="navbar custom-nav fixed-top navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <router-link class="navbar-brand" to="/">My page</router-link>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <router-link to="/" class="nav-link">Home</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/productsPage" class="nav-link">Products</router-link>
            </li>

            <li class="nav-item">
              <router-link to="/about" class="nav-link">About</router-link>
            </li>
          </ul>

          <form class="form-inline my-2 my-lg-0">
            <a
              class="btn btn-outline-success my-2 my-sm-0"
              data-toggle="modal"
              data-target="#login"
            >Be an artist</a>
            <a
              class="btn btn-outline-info border-0 mx-2 my-2 my-sm-0"
              data-toggle="modal"
              data-target="#miniCart"
            >
              <i class="fas fa-shopping-bag"></i>
            </a>
          </form>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  name: "Navbar",
  props: {
    msg: String
  },
  components: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@media (min-width: 992px) {
  .navbar.custom-nav {
    padding-top: 16px;
    padding-bottom: 16px;
    background-color: white !important;
  }
}

.btn-outline-success {
  background-color: #ffa7a7;
  border-color: #ffa7a7;
}

.btn-outline-success:hover {
  background-color: #ffbcd9;
  border-color: #ffbcd9;
}

.navbar-brand {
  font-family: "Lobster", cursive;
  font-size: 1.8em;
}

i {
  font-size: 1.8em;
}

.fa-shopping-bag {
  color: #353753;
}
.fa-shopping-bag:hover {
  color: #c9fdff;
}
</style>

依赖项代码（package.json）：

 "dependencies": {
    "bootstrap": "^4.4.1",
    "core-js": "^3.6.5",
    "firebase": "^7.14.0",
    "jquery": "^3.5.0",
    "popper.js": "^1.16.1",
    "vue": "^2.6.11",
    "vue-carousel": "^0.18.0",
    "vue-firestore": "^0.3.30",
    "vue-router": "^3.1.6",
    "vue-stripe-elements-plus": "^0.3.2",
    "vue2-editor": "^2.10.2",
    "vue2-filters": "^0.10.0",
    "vuex": "^3.1.3"
  },

在出现问题之前，我还看到了其他StackOverFlow问题，许多人建议使用标记将jQuery和CDN Bootstrap放入任何Vuejs项目的公共目录中的index.html文件中，在我看来，这是行不通的

navbar-toggler不起作用/引导navbar不切换

0 个答案: