Bootstrap 汉堡导航栏图标丢失答案

【问题标题】：Bootstrap hamburger navbar icon is missingBootstrap 汉堡导航栏图标丢失
【发布时间】：2018-07-05 10:06:47
【问题描述】：

我使用 bootstrap 4 来制作导航栏，当我缩小窗口时，汉堡包就在那里，但它不会出现。它是功能性的，但我看不到它。谁能帮我解决这个问题？

<nav class="navbar navbar-expand-lg navbar-custom">
    <div class="container"><a href="#landing" class="navbar-brand">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbarNavDropdown">
            <ul class="navbar-nav nav-fill w-100">
                <li class="nav-item">
                    <a class="nav-link" href="#landing">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#skill">SKILL</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#work">EXPERIENCE</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

【问题讨论】：

请重新格式化或接受已提交给您的当前编辑请求

标签： html twitter-bootstrap navbar hamburger-menu

【解决方案1】：

Bootstrap 4 添加了新类：navbar-dark 和 navbar-light，根据您的背景颜色，您可以将这些类之一添加到导航中以使您的移动切换可见。

您还可以使用背景颜色（如下所示）进行完全自定义的操作，或者更换默认图标。

    <nav class="navbar navbar-dark bg-dark">
       <!-- Navbar content -->
    </nav>

    <nav class="navbar navbar-dark bg-primary">
      <!-- Navbar content -->
    </nav>

    <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
      <!-- Navbar content -->
    </nav>

如果您真的想对动画和自定义图标感兴趣，请查看以下导航栏自定义示例： MDBootstrap examples

【讨论】：

您好，感谢您的回答。我希望我的导航栏背景是透明的，但是当窗口很小时，我希望它具有背景色。这甚至可能吗？
是妮可，您可以使用媒体查询来完成此操作。 developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/… 或者您可以使用 javascript 或 jquery 创建一个“监听器”来测量浏览器窗口的宽度，然后根据宽度添加和删除 css 类。 stackoverflow.com/questions/18477016/…
还可以看看这里以了解特殊性和 Bootstrap 移动菜单样式：stackoverflow.com/questions/20540563/… .navbar-default .navbar-toggle .icon-bar { background-color: black; }
你好，我想我知道问题出在哪里了...我一直以为“☰”只能用一些复杂的代码，但显然我只需要添加一行<i class="fa fa-bars fa-1x"></i>，现在它解决了。就这么简单......但仍然感谢您的时间。 :)

【解决方案2】：

默认情况下，您的切换器是透明的；

.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;

}

【讨论】：

是的，我知道我可以在这里修改，但是我不知道如何让三个小线出现？（你能明白我的意思吗？：P）
您可以使用 'span class="navbar-toggler-icon"' 来添加它
我的导航栏的完整 html 代码在我的问题中。如果您想查看 CSS，请点击此处。 .navbar-custom { background-color: transparent; } .navbar-brand { font-size: 40px; } .navbar-custom .navbar-brand, .navbar-custom .navbar-text { color: rgba(255, 255, 255, .8); } .navbar-custom .navbar-nav .nav-link { color: rgba(255, 255, 255, .5); } .navbar-custom .nav-item.active .nav-link, .navbar-custom .nav-item:hover .nav-link, .navbar-brand:hover { color: #6df0f5; }
最简单的是当您查看此页面时：getbootstrap.com/docs/4.1/components/navbar 只需了解上述建议的颜色变化，即可开始重建。 HTML中会有一点错误。也是一件重要的事情；只需使用 CDN 中的 Bootstrap CSS

【解决方案3】：

您似乎没有为 nav 元素应用任何配色方案。如果没有主题类，汉堡图标是透明的。

将navbar-dark bg-dark 添加到您的nav 元素可以解决此问题。

Color Schemes Documentation

【讨论】：

我使用自定义主题，因为我希望导航栏背景是透明的。但我希望它在窗口较小时显示出来。