引导汉堡导航栏图标丢失

Question

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

Answer 1

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

您还可以使用背景颜色(如下所示(或通过交换默认图标来执行完全自定义的操作。

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

如果你真的想花哨地使用动画和自定义图标，请查看这些导航栏自定义示例： MD打包示例

Answer 2

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

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

}

Answer 3

看起来您没有将任何配色方案应用于nav元素。如果没有主题类，汉堡包图标是透明的。

向nav元素添加navbar-dark bg-dark可以解决此问题。

配色方案文档