引导导航栏链接切换器不显示

Posted 2023-03-24

【中文标题】引导导航栏链接切换器不显示

【英文标题】：Bootstrap Navbar Link Toggler Not Showing

【发布时间】：2020-01-11 21:48:40

【问题描述】：

编辑 9-10-19：我给 img 标签一个“logo”类，并将内联样式移动到单独的样式表，导航栏链接仍然不会折叠为切换图标。

我一直在设计引导导航栏并取得了一些成功，但由于某种原因，当我减小页面大小时，导航栏链接不会折叠成切换图标，它们只是消失了。

如果页面变得太小，我希望导航栏链接消失，但替换为可以切换以显示导航栏链接的按钮。

我已经做了很多查找，我发现的大多数问题解决方案都涉及确保 div id 匹配，我很确定我的匹配，请帮助！

<nav class="navbar navbar-expand-md navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/darkiddlogostandalone.png"  ></a>

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive">
                                        <span class="navbar-toggler-icon"></span>
    </button>

<div class="navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
            </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Illustration</a>
            </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Animation</a>
            </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
            </li>
    </ul>
</div>
</div>

我只是想让链接压缩成右侧的切换按钮。

【参考方案1】：

所以回答我自己的问题（有点）

我回到了我在汉堡切换器工作时制作的这个引导模板的早期版本，并精心添加了徽标并重新设置了导航栏的样式，因为我发现恢复到旧样式表似乎可以让汉堡显示起来。

我发现使用引导类的样式可能会被击中或错过，所以我给我的 logo img 标签一个“logo”类，然后进入样式表并

`position: absolute;
left: 0px;
top: 0px;
z-index: -1;` 

我不知道将徽标保留在作为导航栏的流体容器的左上角是否过分，我正在观看本教程https://www.youtube.com/watch?v=rgukBRi1CSU&t=594s 虽然很难理解这位先生，但他提到要摆脱 bg-light 和 navbar-light 以使他的导航栏为绿色，我只是想要灰色，所以我删除了 bg-light 并添加了一个名为“navback”的类和用它来设置背景颜色...<nav class="navbar navbar-expand-md navbar-light sticky-top navback">

`.navback 
background-color: #A8A8A8;

`

我的 logo 很大，我很难让它可靠地调整大小，所以我把它设为 190x54px，这似乎消除了对其大小进行样式设置的需要，我认为 logo 本身是造成问题的原因，因为无论出于何种原因，我的导航栏和徽标样式都妨碍了导航栏链接折叠到汉堡切换按钮中，但上述更改似乎解决了这种情况。