访问: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"> -->
在.navbar-toggler-icon
当菜单被折叠的移动反应并没有在导航栏,toggler按钮出现。
我已经搜索了这个问题,并调整了jquery和bootstrap链接。通过将jquery链接放在bootstrap 4链接上方。但这似乎不起作用。外部库以与jsfiddle相同的顺序链接到我的HTML中。
更新:
navbar-inverse
在B4版本中不再可用,您可以navbar-dark
改用。
使用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>
如果您使用bootstrap 4 beta:
您只能在nav标签中添加navbar-dark类。
结果:
<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>
如果您不使用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);
}
或使用awsome字体中的fa-bars
使用navbar-dark代替navbar-inverse,也使用bg-dark代替bg-inverse
<nav class="navbar navbar-dark navbar-expand-md bg-dark ">
本文地址:http://jquery.askforanswer.com/bootstrap-4-navbar-toggler-iconbuchuxian.html
文章标签:css , html , javascript , jquery , twitter-bootstrap
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
文章标签:css , html , javascript , jquery , twitter-bootstrap
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
评论已关闭!