我正在尝试使用左侧的切换按钮进行可折叠的引导程序 4 导航。这不是问题,但我也在尝试在导航右侧有一个操作按钮(或多个按钮)。
如何在右侧有从导航栏折叠菜单中排除的按钮/链接。此外,如何避免导航栏折叠菜单在展开时向下推这些项目?我可以浮动右键,但这也会导致问题。
参考图片:
当前实现的实时 Codeply 示例:https ://www.codeply.com/go/IDCOYUVXCH
你将不得不像这样使用 flexbox 工具......
https://www.codeply.com/go/xXGsq5MVdi
<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<div class="container d-flex flex-row flex-md-nowrap flex-wrap">
<a href="#" class="hidden-lg-up my-2 mr-3" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false">
<i class="fa fa-bars text-white"></i>
</a>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse flex-md-unordered flex-last" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="d-flex ml-auto">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</div>
<div class="hidden-md-up w-100"><!--hidden spacer to force wrap--></div>
</div>
</nav>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句