首页 > 解决方案 > bootstrap-vue 切换导航在单击时不删除样式属性

问题描述

所以我有一个使用 bootstrap-vue 作为导航栏的 nuxt 应用程序。折叠时,导航元素添加了一个名为的属性style="display: none;",当单击切换时,样式属性将被删除,但是单击时样式属性仍然存在,因此您可以想象我的导航栏不会因此而切换。现在我在另一个组件中使用这个导航栏并且没有问题。它在开发中也能正常工作。这个问题出现在我的生产设置中。我不确定这是配置问题还是错误,但我在这方面没有发现太多。

在开发中我运行构建命令npm run dev

在生产中我运行构建命令npm run generate

有没有人遇到过类似的问题?

这是导航栏的代码

<template>
  <b-navbar 
    toggleable="md" 
    type="light" 
    variant="white">
    <b-navbar-brand href="#">
      <img 
        class="hero-logo"
        src="~assets/TraxitHeroLogo.png"
      >
    </b-navbar-brand>
    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
    <b-collapse 
      id="nav_collapse"
      is-nav
      style 
    >
      <b-navbar-nav class="ml-auto">
        <b-nav-item href="#mission">Our Mission</b-nav-item>
        <b-nav-item to="/features/overview">Features</b-nav-item>
        <b-nav-item href="#pricing">Pricing</b-nav-item>
        <b-nav-item href="#contact">Contact</b-nav-item>
        <b-nav-item to="/support">Support</b-nav-item>
        <b-nav-item 
          class="login-btn"
          to="/login"
        >
          Login
        </b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

标签: bootstrap-vuenuxt.js

解决方案


这应该在较新的版本中修复。


推荐阅读