0

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

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>

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

4

1 回答 1

0

弄清楚了...

需要应用于折叠的“显示”类（带有 id 的 div navbarColor03）。

<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>

于 2017-11-26T16:03:48.017 回答