调整浏览器大小时，Bootstrap navbar-toggler-icon（3 栏堆栈）不显示

Question

调整浏览器大小时，没有显示三栏“汉堡菜单”。折叠的菜单在那里并且当我单击它时可以正常工作，但是它只是一个不可见的白框。我已将我的代码与 Bootstrap 源代码进行了仔细比较，但无法确定任何原因。以下是我的导航栏代码：

<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>

这是来自开发者工具的屏幕截图，显示它确实存在，只是对用户不可见。 Screenshot of Developer Tools showing existence of the navbar toggler

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

Answer 1

navbar-toggler-icon 未显示，因为代码中的 id 属性与按钮上的 data-toggler 属性的值不同。

<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>

我刚刚将<div class="collapse navbar-collapse" id="collapse"> 中的 id 更改为“collapse”，遵循 data-toggle="collapse"。

Hope that helps @Shadee Merhi