Bootstrap 4使导航栏项目始终在小屏幕上扩展且没有按钮

Question

我正在网站脚注上工作，正在寻找一种制作导航器的方法，该导航器将所有物品在大屏幕上排成一排，然后在小屏幕上折叠成多排。 崩溃发生的很好，但是我无法找出一种方法来：

a）自动显示行，直到单击切换按钮时才隐藏行

b）完全消除切换按钮

我当前的代码：

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <nav class="navbar navbar-dark bg-dark navbar-expand-xl py-0" id="footerBar"> <div class="collapse navbar-collapse" id="navbarColor03"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#" target="_blank">link1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">link2</a> </li> </ul> </div> </nav> 

目前，没有按钮就无法折叠（显然是因为我已将其删除）。 有没有一种简单的方法可以使其默认扩展到较小的屏幕？

Answer 1

弄清楚了...

需要将“ show”类应用于折叠（ID为navbarColor03的div）。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <nav class="navbar navbar-dark bg-dark navbar-expand-xl py-0" id="footerBar"> <div class="collapse navbar-collapse show" id="navbarColor03"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#" target="_blank">link1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">link2</a> </li> </ul> </div> </nav>