twitter-bootstrap - 导航栏 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的 s 使用类，[we] 如果您愿意，[我们] 可以完全避免基于列表的方法（https://getbootstrap.com/docs/4.3/components/navbar/#nav），我已经尝试将ul/替换li为divs，如下所示：

<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">
                <div class="navbar-nav">
                    <a class="nav-item nav-link" href="/">Accueil</a>
                    <a class="nav-item nav-link" href="/go/olymp">Olymp</a>
                    <a class="nav-item nav-link" href="/go/team">&Eacute;quipe</a>
                    <a class="nav-item nav-link" href="/go/expertises">Expertises</a>
                    <a class="nav-item nav-link" href="/go/trainings">Formations</a>
                    <a class="nav-item nav-link" href="/go/projects">Clients</a>
                    <a class="nav-item nav-link" href="/go/press">Presse</a>
                    <a class="nav-item nav-link" href="/go/about">About</a>
                </div>
            </div>
        </div>
    </nav>
</header>

故意地，我没有导航栏品牌。

检查一些要点

我对 data-target 属性等具有相同的 id。如果您想尝试，我已将原始示例粘贴到 about (à propos) 页面上。我想我已经检查了所有步骤...我有一个想法...

更新

我试图将引导程序 4.2.1 更新到 4.3.1

标签： twitter-bootstrapsassbootstrap-4togglenavbar