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



EDIT 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" height="57px" width="200px"></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>

我只想让链接浓缩到右侧的切换按钮中。

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

我回到了汉堡包切换器工作时制作的这个引导模板的早期版本,并精心添加了徽标并再次设置了导航栏的样式,因为我发现恢复到旧的样式表似乎允许汉堡包出现。

我发现使用引导类的样式可能会被击中或错过,所以我给了我的徽标 img 标签一类"logo",然后进入样式表和

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

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

`.navback {
background-color: #A8A8A8;

}'

我的徽标很大,我很难让它可靠地调整大小,所以我把它定为 190x54px,这似乎消除了对样式大小的需求,我认为徽标本身导致了问题,无论出于何种原因,我的导航栏和徽标的样式都妨碍了导航栏链接折叠到汉堡切换按钮, 但上述变化似乎纠正了这种情况。

最新更新