Bootstrap 4将两个导航栏折叠为一个切换按钮

I've been trying to apply this Bootstrap 4.0 - Two NavBars that collapse into one toggle answer to my issue but am not resolving it after some effort.I'm trying to have the content of both navbars collapse into one toggle button.The two issues are once collapsed to sm my toggle button doesn't display its content (from either target), and that at sm width my lower navbar does not maintain it's height. My code: <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top"> <button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target1, #collapse_target2"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapse_target1"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <a class="navbar-brand"> <img src="https://image.freepik.com/free-vector/businessman-shouting-through-megaphone_23-2147511376.jpg" style="height: 2em"> <span>Home</span> </a> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 4</a> </li> </ul> </div> </nav> <nav class="navbar navbar-expand-sm navbar-light bg-light"> <div class="collapse navbar-collapse" id="collapse_target2"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link" href="#">Link 5</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 6</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 7</a> </li> </ul> </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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> 解决方案 Use a single class to data-target the Navbars, instead of different id's. For example, give both the navbar-collapse elements the navbars class, and then the target is data-target=".navbars".Demo: https://www.codeply.com/go/PvHpcBNuApAlso, I'm not sure why you're using sticky-top on the 1st navbar. You should remove that otherwise the 2nd navbar will slide under the first on mobile when scrolling. If you want both navbars fixed at the top, see this answer. <nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <button class="navbar-toggler" data-toggle="collapse" data-target=".navbars"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse navbars" id="collapse_target1"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <a class="navbar-brand"> <img src="https://image.freepik.com/free-vector/businessman-shouting-through-megaphone_23-2147511376.jpg" style="height: 2em"> <span>Home</span> </a> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 4</a> </li> </ul> </div> </nav> <nav class="navbar navbar-expand-sm navbar-light bg-light"> <div class="collapse navbar-collapse navbars" id="collapse_target2"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link" href="#">Link 5</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 6</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 7</a> </li> </ul> </div> </nav>Also see: Bootstrap 4 navbar with 2 rows 这篇关于Bootstrap 4将两个导航栏折叠为一个切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！