Navbar Bootsrap 4不切换（scss？）

Question

我已自定义引导程序。除导航栏切换外，其他所有功能均有效。您可以在http://www.ideastud.io上查看我的网站。

简介

我有4个SCSS自定义引导程序：

• common_begin（用于自定义网格断点，覆盖变量等）
• theme1（用于自定义颜色并添加theme1样式）
• theme2（用于自定义颜色并添加theme2样式）
• common_end（为两个主题添加类或自定义引导类）

在我的HTML代码上，我使用theme1或theme2（由gulp编译）。 Theme1和theme2具有相同的层次结构：

// override bootstrap variables

// import common styles 
@import "common_begin.scss";

// import some bootstrap :
@import "../lib/bootstrap/scss/_functions.scss";
@import "../lib/bootstrap/scss/_variables.scss";
@import "../lib/bootstrap/scss/_mixins.scss";

@import "../lib/bootstrap/scss/bootstrap.scss";

// theme styles
@import "theme1.scss";

  

我不认为引导生成是导致以下问题的原因。

问题

在我的布局中，我有一个导航栏...并且切换器不起作用...我不知道为什么（但是这不是我第一次实现自举）：

<header>
    <a class="d-flex justify-content-center" href="/">
        <img src="/images/logo-ideastudio.png" height="50" class="d-inline-block align-top m-1" alt="">
    </a>
    <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
        <div class="container">
            <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">
                    <li class="nav-item active"><a class="nav-link" asp-page="/">Accueil</a></li>
                    <li class="nav-item"><a class="nav-link" asp-page="/go/olymp">Olymp</a></li>
                    <li class="nav-item"><a class="nav-link" asp-page="/go/team">Equipe</a></li>
                    <li class="nav-item"><a class="nav-link" asp-page="/go/expertises">Expertises</a></li>
                    <li class="nav-item"><a class="nav-link" asp-page="/go/trainings">Formations</a></li>
                    <li class="nav-item"><a class="nav-link" asp-page="/go/projects">Clients</a></li>
                    <li class="nav-item"><a class="nav-link" asp-page="/go/about">À propos</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

尝试解决方案

更改列表方式

并且由于[bootstrap]在其nav中使用类，因此，如果您愿意（https://getbootstrap.com/docs/4.3/components/navbar/#nav），[我们]可以完全避免基于列表的方法，所以我尝试替换{{1} } / ul by li s，就像这样：

div

我故意没有Navbar品牌。

检查一些必需品

我的data-target属性具有相同的ID，等等。如果您想尝试的话，可以将原始样本粘贴到“关于”页面上。我想我已经检查了所有步骤...我有一个主意...

更新

我尝试将引导程序4.2.1更新为4.3.1