Bootstrap 4 让导航栏项目始终在小屏幕上展开，没有按钮答案

【问题标题】：Bootstrap 4 to have navbar items allways expanded on small screen with no buttonBootstrap 4 让导航栏项目始终在小屏幕上展开，没有按钮
【发布时间】：2017-11-21 03:42:35
【问题描述】：

我正在开发一个网站页脚，并且正在寻找一种方法来制作一个导航，它在大屏幕上将所有项目放在一行中，并在较小的屏幕上折叠成多行。崩溃发生得很好，但我想不出办法：

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>

目前，这只是在没有按钮的情况下崩溃（显然是因为我已将其删除）。有没有简单的方法让它默认在小屏幕上展开？

【问题讨论】：

为我工作。（使用 IE 移动版）

标签： navbar nav twitter-bootstrap-4 twitter-bootstrap-4-beta

【解决方案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>

【讨论】：