Javascript Bootstrap 4 navbar-toggler-icon 不出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44583416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 navbar-toggler-icon does not appear
提问by Kinder Cappy
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-icondoes not appear on the navbar-toggler button when the menu is collapsed for mobile responsiveness.
在.navbar-toggler-icon当菜单被折叠的移动反应并没有在导航栏，toggler按钮出现。
I have searched about this problem and adjusted the jquery and bootstrap links also. By putting the jquery link above the bootstrap 4 links. But that does not seem to work. The external libraries are linked in my HTML in the same order as the jsfiddle.
我已经搜索了这个问题并调整了 jquery 和 bootstrap 链接。通过将 jquery 链接放在 bootstrap 4 链接之上。但这似乎不起作用。外部库以与 jsfiddle 相同的顺序链接在我的 HTML 中。
采纳答案by Abhishek Pandey
Update:
更新：
navbar-inverseis no longer available in B4 version, you can use navbar-darkinstead.
navbar-inverse在 B4 版本中不再可用，您可以navbar-dark改用。
Use navbar-inverse bg-inverseinstead of .navbar-default
使用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>
回答by Pekee
If you use bootstrap 4 beta:
如果您使用引导程序 4 测试版：
You can only add the navbar-darkclasse in the navtag.
您只能在nav标签中添加navbar-darkclasse 。
Result:
结果：
<nav class = "navbar navbar-expand-lg navbar-dark fixed-top navbar-default" role = "navigation">
<a class="navbar-brand" href="#">
<img class = "img-responsive logo" src = "~/Content/Images/ogo__160x36.png" alt = "" />
</a>
<button type = "button" class = "navbar-toggler" data-toggle = "collapse" data-target = "#menuPrincipal" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation ">
<span class = "navbar-toggler-icon"> </ span>
</button>
<div class="collapse navbar-collapse" ...>...</div>
</nav>
回答by Moaz Salem
if you don't use navbar-light or dark set background-img some image into .navbar-toggler-icon as follow
如果你不使用 navbar-light 或 dark 设置 background-img 一些图像到 .navbar-toggler-icon 如下
.navbar-toggler-icon {
background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000…p='round' stroke-miterlimit='10' d='M47h22M4 15h22M423h22'/%3e%3c/svg%3e);
}
or use fa-bars from font awsome
或使用 font awsome 中的 fa-bars
回答by Manikant jha
Use navbar-darkinstead for navbar-inverseand bg-dark also instead of bg-inverse
使用navbar-dark代替navbar-inverse和 bg-dark 也代替 bg-inverse
<nav class="navbar navbar-dark navbar-expand-md bg-dark ">
