如何使用引导带4创建导航条，其中只有某些部分被折叠，某些部分仍然出现在中小屏幕上？
如何使用引导带4创建导航条，其中只有某些部分被折叠，某些部分仍然出现在中小屏幕上？
提问于 2020-07-27 11:05:57
问题
通过将data-target和id放置到特定的div元素中，可以在展开切换按钮时工作。
在一个中小屏幕上，肚脐上看到的其他部分也和汉堡包按钮一起下来。
累的
我把navbar-toggler放在所有nav-link的末尾，但是在扩展navbar-toggler的同时，看到的部分和汉堡包按钮的其余部分都掉了下来。
预期产出
navbar-toggler应该扩展，但是看到的部分和汉堡按钮的其余部分必须在导航栏的顶部。
代码低于
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">DASA</a>
<div class="collapse navbar-collapse text-right" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Men <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Women</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kids</a>
</li>
</ul>
</div>
<a class="nav-link" href="#"><i class="fas fa-search"></i></a>
<a class="nav-link" href="#"><i class="fas fa-user"></i></a>
<a class="nav-link" href="#"><i class="fas fa-shopping-bag"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>Codeply代码在这里。谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-27 11:56:02
使用Bootstrap 4 order类来订购最后的移动菜单.
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand order-0" href="#">DASA</a>
<div class="collapse navbar-collapse text-right order-lg-0 order-last" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Men <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Women</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kids</a>
</li>
</ul>
</div>
<a class="nav-link" href="#"><i class="fas fa-search"></i></a>
<a class="nav-link" href="#"><i class="fas fa-user"></i></a>
<a class="nav-link" href="#"><i class="fas fa-shopping-bag"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63114014
复制相关文章
相似问题
腾讯云开发者
