【问题标题】: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" 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>

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

【问题讨论】:

    标签: html toggle navbar collapse visible


    【解决方案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”的类和用它来设置背景颜色...&lt;nav class="navbar navbar-expand-md navbar-light sticky-top navback"&gt;

    `.navback {
    background-color: #A8A8A8;
    

    }`

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

    【讨论】:

      猜你喜欢
      • 2019-03-03
      • 1970-01-01
      • 2020-07-20
      • 2018-11-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多