Bootstrap 4 中是否可以有多个固定顶部导航栏相互显示?
1 目前覆盖了另一个,这不是我想要的。
是的,这是可能的,但你必须相应地定位第二个。导航栏的高度约为 56 像素。
.fixed-top-2 {
margin-top: 56px;
}
body {
padding-top: 105px;
}
<nav class="navbar navbar-toggleable-sm bg-faded navbar-light fixed-top fixed-top-2">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<a href="/" class="navbar-brand">One</a>
<div class="navbar-collapse collapse" id="navbar1">
<ul class="navbar-nav">
..
</ul>
</div>
</nav>
<nav class="navbar navbar-toggleable-sm bg-inverse navbar-inverse fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2">
<span class="navbar-toggler-icon"></span>
</button>
<a href="/" class="navbar-brand">Two</a>
<div class="navbar-collapse collapse" id="navbar2">
<ul class="navbar-nav">
..
</ul>
</div>
</nav>
演示:Bootstrap 4 多个固定顶部导航栏 http://www.codeply.com/go/XUf1n70jny
在某些情况下,使用single fixed-topDIV 包含两者 https://stackoverflow.com/questions/48773669/bootstrap-4-multiple-fixed-navbars-with-animated-shrink/48774705#48774705.
另请参阅:
Bootstrap 4 导航栏在标题后粘住 https://www.codeply.com/go/oY2CyNiA7A/navbar-simple-sticky-top
Bootstrap 4 将两个导航栏折叠成一个切换按钮 https://stackoverflow.com/questions/48970058/bootstrap-4-collapsing-two-navbars-into-one-toggle-button
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)