Twitter bootstrap 调整浏览器大小时，引导导航栏切换图标（3条堆栈）不显示

当我调整浏览器的大小时，三条“汉堡包菜单”不会显示。折叠的菜单在那里，当我点击它时，它可以正常工作，但是它只是一个看不见的白色框。我已经将我的代码与引导源代码进行了仔细的比较，但没有找到导致这种情况的任何原因。以下是我的导航条形码：

<nav class="navbar navbar-expand-lg fixed-top custom_nav_menu sticky">
    <div class="container">
        <a class="navbar-brand logo" id="main-name" href="#home">Name</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a href="#home" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#about" class="nav-link">What We Do</a>
                </li>
                <li class="nav-item">
                    <a href="#features" class="nav-link">Features</a>
                </li>
                <li class="nav-item">
                    <a href="#client" class="nav-link">Testimonials</a>
                </li>
                <li class="nav-item">
                    <a href="#team" class="nav-link">Founding Team</a>
                </li>
                <li class="nav-item">
                    <a href="#contact" class="nav-link">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

这是开发者工具的屏幕截图，显示它确实存在，只是用户看不到。

---

任何帮助都将不胜感激！谢谢。

导航栏切换器图标未显示，因为代码中的id属性与按钮上的数据切换器属性值不同

<nav class="navbar navbar-expand-lg fixed-top custom_nav_menu sticky">
    <div class="container">
        <a class="navbar-brand logo" id="main-name" href="#home">Name</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a href="#home" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#about" class="nav-link">What We Do</a>
                </li>
                <li class="nav-item">
                    <a href="#features" class="nav-link">Features</a>
                </li>
                <li class="nav-item">
                    <a href="#client" class="nav-link">Testimonials</a>
                </li>
                <li class="nav-item">
                    <a href="#team" class="nav-link">Founding Team</a>
                </li>
                <li class="nav-item">
                    <a href="#contact" class="nav-link">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

---

嗨，萨缪尔，谢谢你的回复。我尝试将其更改为id=“collapse”，但似乎无法修复它。当我点击隐形按钮时，菜单没有弹出。我认为datatarget属性必须与列表的id相匹配。

Hope that helps @Shadee Merhi