Bootstrap 4.0-两个NavBar折叠为一个切换 [英] Bootstrap 4.0 - Two NavBars that collapse into one toggle
问题描述
想知道是否有两个导航栏可以显示在台式机的不同行上，但是两个导航栏可以折叠成平板电脑和移动设备上的一个切换器.
Wondering if it's possible to have two navigation bars displaying on separate rows on desktop, but have the two navbars collapse into one toggler on tablet and mobile.
从本质上讲，我希望顶部导航栏包含品牌，然后包含四个或五个菜单项，而第二个导航栏将不包含品牌，而仅包含四个或五个导航元素.我希望这些导航栏显示在桌面上自己的行上，但是当视口缩小到平板电脑或移动设备时，这两个导航栏的内容都放在同一个移动导航栏切换器下.这可能吗?我看到了很多针对Bootstrap 3的解决方案，但没有针对Bootstrap 4的解决方案.
Essentially, I want the top navbar to contain the brand, and then four or five menu items, while the second navbar would not contain a brand but instead just four or five more navigation elements. I would like these navigation bars to display on their own rows on desktop, but when the viewport shrinks to tablet or mobile, have the contents of both of these navbars fall under the same mobile navbar toggler. Is this possible? I see a bunch of solutions for Bootstrap 3, but none for Bootstrap 4.
<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"></head>
<body>
<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 navigation">
<span class="navbar-toggler-icon"></span>
</button>
<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="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</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 navigation">
<span class="navbar-toggler-icon"></span>
</button>
<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="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
推荐答案
例如:
<button type="button" class="btn btn-primary dropdown-toggle btn-sm"
data-toggle="collapse" data-target="#demo,#demo1,#demo2">Hide them all</button>
you can serialize target elements ids with (,)
这篇关于Bootstrap 4.0-两个NavBar折叠为一个切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
