时间戳

首页 > 解决方案 > Bootstrap 汉堡导航栏图标丢失

html - Bootstrap 汉堡导航栏图标丢失

问题描述

我使用 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>

标签： htmltwitter-bootstrapnavbarhamburger-menu

解决方案

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

推荐阅读