Visit: https://jsfiddle.net/8tpm4z00/ https://jsfiddle.net/8tpm4z00/
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#myNavigation" aria-controls="myNavigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand">KP</a>
<div class="collapse navbar-collapse" id="myNavigation">
<div class="navbar-nav">
<a class="p-3 nav-item nav-link active " href="#">Home</a>
<a class="p-3 nav-item nav-link " href="#">About</a>
<a class="p-3 nav-item nav-link " href="#">Contact Me</a>
</div><!-- <div class="navbar-nav"> -->
</div><!-- <div class="collapse navbar-collapse"> -->
</div><!-- <div class="container"> -->
The .navbar-toggler-icon
当菜单因移动响应而折叠时,不会出现在导航栏切换按钮上。
我已经搜索过这个问题并调整了 jquery 和 bootstrap 链接。通过将 jquery 链接放在 bootstrap 4 链接上方。但这似乎不起作用。外部库以与 jsfiddle 相同的顺序链接在我的 HTML 中。
Update:
navbar-inverse
B4版本不再可用,您可以使用navbar-dark
反而。
Use navbar-inverse bg-inverse
代替.navbar-default
<section role="navigation">
<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm fixed-top"><!-- navbar-inverse -->
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#myNavigation" aria-controls="myNavigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand">KP</a>
<div class="collapse navbar-collapse" id="myNavigation">
<div class="navbar-nav">
<a class="p-3 nav-item nav-link active " href="#">Home</a>
<a class="p-3 nav-item nav-link " href="#">About</a>
<a class="p-3 nav-item nav-link " href="#">Contact Me</a>
</div><!-- <div class="navbar-nav"> -->
</div><!-- <div class="collapse navbar-collapse"> -->
</div><!-- <div class="container"> -->
</nav>
</section>
更新了小提琴 https://jsfiddle.net/8tpm4z00/6/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)