Bootstrap 4.0 - 折叠成一个切换的两个导航栏 [英] Bootstrap 4.0 - Two NavBars that collapse into one toggle
问题描述
想知道是否可以在桌面上的不同行上显示两个导航栏,但在平板电脑和移动设备上将两个导航栏折叠成一个切换器.
本质上,我希望顶部导航栏包含品牌,然后是四五个菜单项,而第二个导航栏不包含品牌,而是仅包含四五个导航元素.我希望这些导航栏在桌面上显示在自己的行上,但是当视口缩小到平板电脑或移动设备时,这两个导航栏的内容都属于同一个移动导航栏切换器.这可能吗?我看到了很多 Bootstrap 3 的解决方案,但 Bootstrap 4 没有.
<span class="navbar-toggler-icon"></span>按钮><div class="collapse navbar-collapse" id="navbarNavAltMarkup"><div class="navbar-nav"><a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a><a class="nav-item nav-link" href="#">功能</a><a class="nav-item nav-link" href="#">定价</a><a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav><nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle导航"><span class="navbar-toggler-icon"></span>按钮><div class="collapse navbar-collapse" id="navbarNavAltMarkup"><div class="navbar-nav"><a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a><a class="nav-item nav-link" href="#">功能</a><a class="nav-item nav-link" href="#">定价</a><a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5Kkn"cross/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicFoGinp"crossIp"<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkEk>anJVugt;anJVugt;n</脚本>