Bootstrap 4导航,从移动折叠中排除的左侧切换和右侧按钮? [英] Bootstrap 4 navigation, left-side toggle with right-side button excluded from mobile collapse?
问题描述
我正在尝试使用左侧的切换按钮进行可折叠的bootstrap 4导航.这不是问题,但我也尝试在导航的右侧设置一个或多个操作按钮.
I'm trying to have a collapsible bootstrap 4 navigation with the toggle button on the left-hand side. This isn't a problem, but I'm also trying to have an action button (or buttons) on the right side of the navigation.
如何在导航栏折叠菜单中排除右侧的按钮/链接.此外,在展开时如何避免导航栏折叠菜单下推这些项目?我可以按动右键,但这也会引起问题.
How can I have buttons/links on the right-hand side that are excluded from the navbar-collapse menu. Additionally, how can I avoid the navbar-collapse menu pushing down these items when expanded? I can float the right button but this also causes issues.
请参阅图片:
当前实施的Live Codeply示例: https://www.codeply.com/go/IDCOYUVXCH
Live Codeply example of current implementation: https://www.codeply.com/go/IDCOYUVXCH
推荐答案
您必须像这样使用flexbox实用程序...
You would have to use the flexbox utils like this...
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>
https://www.codeply.com/go/xXGsq5MVdi
这篇关于Bootstrap 4导航,从移动折叠中排除的左侧切换和右侧按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!