调整浏览器大小时未显示Bootstrap navbar-toggler-icon

问题描述

调整浏览器大小时，三栏式“汉堡菜单”未显示。折叠菜单在那里，当我单击它时可以正常工作，但是它只是一个看不见的白框。我已将我的代码与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>

这是开发人员工具的屏幕截图，显示确实存在，对用户不可见。 source

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

解决方法

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>

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

Hope that helps @Shadee Merhi