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" class 应用到合拢（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>

Bootstrap 4 使导航栏项在没有按钮的小屏幕上始终展开

Bootstrap 4 to have navbar items allways expanded on small screen with no button

nav

navbar

twitter-bootstrap-4

twitter-bootstrap-4-beta