gpt4 book ai didi

html - Bootstrap 导航栏折叠图标不显示也不工作

转载 作者:太空宇宙 更新时间:2023-11-04 08:33:00 25 4
gpt4 key购买 nike

我正在尝试在我的一个小元素中实现可折叠的导航栏。我的问题是当我调整窗口大小时,导航栏折叠但按钮(即使它是可点击的)没有出现也没有提供任何选项。

不知道是不是jQuery/JS的问题。我只是一个初学者,所以我只是在 codepen 设置上链接了一些库。我查看了人们对此提出的一些问题,但没有一个解决方案对我有帮助。

codepen 链接是:https://codepen.io/diegomengue/pen/XgRamN .

感谢任何有关该主题的帮助(以及各种提示)!

谢谢。

HTML:

<nav class='navbar navbar-toggleable-sm mx-auto sticky-top'>
<button class="navbar-toggler collapsed mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNav">
<ul class='navbar-nav mx-auto'>
<li class='nav-item'><a href='#sobreMim' class='nav-link'><strong>Diego Mengue</strong></a></li>
<li class='nav-item'><a href='#portfolio' class='nav-link'>Portfólio</a></li>
<li class='nav-item'><a href='#contato' class='nav-link'>Contato</a></li>
</ul>
</div>
</nav>

最佳答案

Navbar 切换器类需要 navbar-color-scheme 类型类。试试这支笔

<nav class='navbar navbar-inverse navbar-toggleable-sm mx-auto sticky-top'>
<button class="navbar-toggler collapsed mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class='navbar-nav mx-auto'>
<li class='nav-item'><a href='#sobreMim' class='nav-link'><strong>Diego Mengue</strong></a></li>
<li class='nav-item'><a href='#portfolio' class='nav-link'>Portfólio</a></li>
<li class='nav-item'><a href='#contato' class='nav-link'>Contato</a></li>
</ul>
</div>
</nav>

https://codepen.io/dannybrown/pen/yXXBxK?editors=1100

如果您不想遵循可用的配色方案,请在您的自定义样式中为 navbar-toggler 类添加样式

关于html - Bootstrap 导航栏折叠图标不显示也不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44679443/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com