我怎样才能让我的导航链接在一个ul中横跨页面，在一个大图片的下方运行，但又能让这些相同的链接被移动到一个折叠的导航条中，并在页面顶部有一个按钮？我看到的所有选项都是要求导航链接横跨页面顶部或沿侧面运行。这是我的代码。
<body>
<img class="img-fluid" src="img/latestlogo3.png" alt="header-img">
<div class="container">
<br>
<ul class="nav justify-content-center">
<li class="nav-item ml-3 mr-3">
<a class="nav-link" href="#">Who is Gustav Mahler?</a>
</li>
<li class="nav-item ml-3 mr-3">
<a class="nav-link" href="#">EPISODES</a>
</li>
<li class="nav-item ml-3 mr-3">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item ml-3 mr-3">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
<hr>
<br>
<div class="row">
<div class="col-sm mb-4 center-block">
<img src="img/episode.png" class="img-fluid"/>
</div>
<div class="col-sm mb-4 center-block">
<img src="img/episode.png" class="img-fluid"/>
</div>
</div>
</body>
使用显示助手。
https:/getbootstrap.comdocs4.3utilitiesdisplay
要隐藏元素，只需使用.d-none类或.d-{sm,md,lg,xl}-none类中的一个类，即可实现任何响应的屏幕变化。
所以你需要两个导航条，一个响应大尺寸，另一个响应小尺寸。